Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 16PHP与Ajax实现表单验证-2018年4月17日16:24:35
Blogger Information
Blog 32
fans 0
comment 0
visits 21438
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
16PHP与Ajax实现表单验证-2018年4月17日16:24:35
inhylei
Original
679 people have browsed it

PHP使用ajax无刷新注册再次使用$.post 发送与接收数据。使用if和switch语句进行判断输出结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例：php来处理表单</title>
<style type="text/css">
table {
background-color: lightgreen;
box-shadow: 5px 5px 5px #888;
border-radius: 15px;
padding: 15px;
margin: 50px auto;
}
table td{
padding: 8px;

}
table caption {
font-size: 1.5em;
margin-bottom: 10px;
}
textarea {
resize: none;
}
form button{
width: 100px;
height: 30px;
border:none;
background-color:skyblue;
color:white;
}
form button:hover{
background-color: orange;
font-size: 1.2em;
cursor:pointer;
}
input{
background-color: skyblue;
border-radius: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form id="register">
<table>
<caption>用户注册</caption>
<tr>
<td><label for="email">邮箱</label></td>
<td><input type="text" name="name" id="email" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">密码</label></td>
<td><input type="password" name="password1" id="password1" ></td>
</tr> <tr>
<td><label for="password2">确认密码</label></td>
<td><input type="password" name="password2" id="password2" ></td>
</tr>
<tr>
<td><label for="secret">性别</label></td>
<td><input type="radio" name="gender" id="male" value="male"> <label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"> <label for="female">女</label>
<input type="radio" name="gender" id="secret" value="secret" checked=""> <label for="secret">保密</label></td>
</tr>
<tr>
<td><label for="level">级别</label></td>
<td> <select name="level" id="level">
<option value="0">初级</option>
<option value="1" selected="">中级</option>
<option value="2">高级</option>
</select></td>
</tr>
<tr>
<td><label>语言</label></td>
<td><input type="checkbox" name="lang[]" id="php" value="php" checked=""><label for="php">php</label>
<input type="checkbox" name="lang[]" id="java" value="java" ><label for="java">java</label>
<input type="checkbox" name="lang[]" id="python" value="python" ><label for="python">python</label>
<input type="checkbox" name="lang[]" id="java" value="java" ><label for="java">java</label></td>
</tr>
<tr>
<td><label for="comment">简介</label></td>
<td><textarea name="comment" id="comment" rows="3" cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2"><button type="button" name="submit" id="submit">提交</button></td>

</tr>
</table>
</form>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
//所有的表单数据验证全部使用ajax完成请求类型为post但是为了代码的简洁和可读性操作类型使用get
$('#email').blur(function(){

$.post(
'admin/check.php?check=email', 
'email='+$('#email').val(), 
function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 2:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','green')
break;


}


},'json')



})
//验证密码
$('#password1').blur(function(){
if ($('#email').val().length == 0) {
return false
}
$.post(
'admin/check.php?check=password1',
'password1='+$('#password1').val(),
 function(data){
  if (data.status ==0) {
   $('td').find('span').remove()
  $('#password1').after('<span>').next().text(data.msg).css('color','red')
  }

 },'json')

})
//验证密码
$('#password2').blur(function(){
if ($('#email').val().length == 0 || $('#password1').val().length == 0) {
return false
}
$.post(
'admin/check.php?check=password2',
{
password1: $('#password1').val(),
password2: $('#password2').val()

},
 function(data){
  switch(data.status){
  case 0:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red')
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','green')
break;


  }

 },'json')

})
// 验证文本框
$('#comment').blur(function(){
if ($('#email').val().length == 0 || $('#password1').val().length == 0 ||$('#password2').val().length == 0) {
return false
}
$.post(
'admin/check.php?check=comment',
'comment='+$('#comment').val(),
 function(data){
  switch(data.status){
  case 0:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red')
break;
case 2:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','green')
break;


  }

 },'json')

})
//提交验证
$('#submit').click(function(){
$.post('admin/check.php?check=submit',
'submit='+$('#register').serialize(),
function(data){
alert(data)

})
})



</script>
</body>
</html>

使用$_GET方式进行验证，if和switch语句进行判断输出，结果进行json_encode输出

<?php 
// echo '<pre>';
// print_r($_POST);
// echo $_GET['check'];
switch ($_GET['check']) {
	//验证邮箱
	case 'email':
		$email = $_POST['email'];
		if(empty($email)){
			exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
		}else if(in_array($email,['admin@php.cn','wo@gmail.com'])){
			exit(json_encode(['status'=>1,'msg'=>'邮箱已占用']));
		}else {
			exit(json_encode(['status'=>2,'msg'=>'邮箱可以用']));
		}
		break;
	//验证密码
	case 'password1':
	    $pwd1 = $_POST['password1'];
	    if(empty($pwd1)){
	    	exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
	    }
		break;
		//验证确认密码
	case 'password2':
	    $pwd1 = $_POST['password1'];
	    $pwd2 = $_POST['password2'];
	    if (empty($pwd2)) {
	    	exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
	    }else if($pwd1 != $pwd2){
	    	exit(json_encode(['status'=>1,'msg'=>'两次密码不相同']));
	    }else{
	    	exit(json_encode(['status'=>2,'msg'=>'验证通过']));

	    }
	    break;
//验证文本框
	    case 'comment':
	    $cmt = $_POST['comment'];
	    if (empty($cmt)) {
	    	exit(json_encode(['status'=>0,'msg'=>'不能为空']));
	    }else if(mb_strlen(trim($cmt) <= 20)){
	    	exit(json_encode(['status'=>1,'msg'=>'不能少于20个字符']));
	    }else{
	    	exit(json_encode(['status'=>2,'msg'=>'验证通过']));

	    }
	    break;
	    case 'submit':
	    {    exit('恭喜，注册成功');}

}


 ?>

执行结果如下图

QQ截图20180417164029.jpg

总结： 1.经过此次的书写，对$.post() 和switch等语句有了更进步的掌握和熟练运用，$.post()返回方式使用text或者json输出不能忘记书写。

2，ajax对于无刷新注册提交数据，得到了更深入的体会。

3，表单验证使用来说要加强书写，结束完语句要有分号（；）标志，不能忘记。



Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post