1.register.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<script>
//用户名的通过id
function checkUserName()
{
//得到userName输入框对象
var userName = document.getElementById("userName");
//得到提示框对象
var checkUserNameResult = document.getElementById("checkUserNameResult");
//判断输入框的内容是否为空
if(userName.value.trim().length==0){
//向提示框输入内容
checkUserNameResult.innerHTML = "*用户名不能为空*";
return focus();
}else{
checkUserNameResult.innerHTML = "";
}
}
//密码的通过传参
function checkPassword(obj){
var password = obj;
var checkPasswordResult = document.getElementById("checkPasswordResult");
if(password.trim().length==0){
checkPasswordResult.innerHTML = "*密码不能为空*";
obj.focus();
}else{
checkPasswordResult.innerHTML = "";
}
}
//邮箱不在HTML里加点击事件
// onload 事件会在页面或图像加载完成后立即发生。
window.onload=function()
{
var email=document.getElementById("email");
email.onblur=function()
{
var checkEmailResult=document.getElementById("checkEmailResult");
if(email.value.trim().length==0)
{
checkEmailResult.innerHTML = "*邮箱不能为空*";
return focus();
}
else
{
checkEmailResult.innerHTML = "";
}
}
}
/*function checkEmail()
{
//得到userName输入框对象
var email = document.getElementById("email").value;
//得到提示框对象
var checkEmailResult = document.getElementById("checkEmailResult");
//判断输入框的内容是否为空
if(email.trim().length==0){
//向提示框输入内容
checkEmailResult.innerHTML = "*用户名不能为空*";
return focus();
}else{
checkEmailResult.innerHTML = "";
}
}
*/
//整个表单提交验证,验证通过就给后台处理页面,不通过提示错误
function checkLoginForm() {
var un = document.getElementById("userName");
var pw = document.getElementById("password");
var em = document.getElementById("email");
if(un.value == "" || pw.value == "" || em.value == "") {
alert("用户名或密码或邮箱不能为空");
return false;
}
}
</script>
</head>
<body>
<form method="post" action="test.php" onsubmit="return checkLoginForm()">
用户名: <input type="text" name="userName" id="userName" onBlur="checkUserName();">
<span id="checkUserNameResult" style="color: red"></span>
<br/>
密码: <input type="password" name="password" id="password" onblur="checkPassword(this.value);">
<span id="checkPasswordResult" style="color: red"></span>
<br/>
注册邮箱:<input type="text" name="email" id="email" >
<span id="checkEmailResult" style="color: red"></span>
<br/>
<br/>
<input type="submit" value="注册">
</form>
</body>
</html>
2.处理注册页面的后台页面test.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册处理页面</title>
</head>
<body>
<?php
//建立users2数据库,account数据表,id,userName,password,email字段
//1.创建连接
$conn=mysqli_connect('localhost','root','123','users2');
//2.检测连接
if(!$conn)
{
die("connect defail:".mysqli_connect_error());
}
else
{
echo "连接成功";
}
//3.插入数据
//$sql="insert into account(id,userName,password,email) values(NULL,'xiaoming','123','123')";//注意:前面的数据库字段不需要用引号,否则出错
//上面的sql是检测代码
$userName=$_POST["userName"];
$password=$_POST["password"];
$email=$_POST["email"];
$sql="insert into account(id,userName,password,email) values(NULL,'$userName','$password','$email')";
$test=mysqli_query($conn,$sql);
if($test)
{
echo "注册成功";
//header("location:login.php");
}
else
{
echo "插入失败".$sql."<br/>".mysqli_error($conn);
}
?>
</body>
</html>