PHP连接数据库利用js验证表单

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()">
用户名： &nbsp;&nbsp;&nbsp;<input type="text" name="userName" id="userName" onBlur="checkUserName();">
<span id="checkUserNameResult" style="color: red"></span>
<br/>
密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

PHP连接数据库利用js验证表单

猜你喜欢