以下用jQuery， ajax 和 php完成服务器端对用户输入的验证：
前端代码如下
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php 处理表单</title>
<style type="text/css">
table{
background-color: wheat;
box-shadow: 3px 3px 3px #888;
border-radius: 15px;
padding: 15px;
margin: 30px 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: orangered;
font-size: 1.1em;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<table>
<caption>register</caption>
<tr>
<td><label for="email">email:</label></td>
<td><input type="text" name="email" id="email" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">password:</label></td>
<td><input type="password" name="password1" id="password1"></td>
</tr>
<tr>
<td><label for="password2">comfirm your password:</label></td>
<td><input type="password" name="password2" id="password2"></td>
</tr>
<tr>
<td><label for="sex">Gender:</label></td>
<td>
<input type="radio" name="gender" id="male" value="male"><label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female"><label for="female">Female</label>
<input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">secret</label>
</td>
</tr>
<tr>
<td><label for="level">level:</label></td>
<td>
<select name="level" id="level">
<option value="0">Junior</option>
<option value="1" selected>Middle</option>
<option value="2">Senior</option>
</select>
</td>
</tr>
<tr>
<td><label for="php">language:</label></td>
<td>
<input type="checkbox" name="language" id="php" checked><label for="php">php</label>
<input type="checkbox" name="language" id="java" ><label for="java">java</label>
<input type="checkbox" name="language" id="python" ><label for="python">python</label>
<input type="checkbox" name="language" id="C" ><label for="C">C</label>
</td>
</tr>
<tr>
<td><label for="comment"></label</td>
<td>
<textarea name="comment" id="comment" rows="3" cols="20"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submit" id="submit" value="submit">Submit</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//using ajax to compelete the form valiadation, using post method
//1.email validation
$('#email').blur(function () {
//using post method
//在URL里面加上参数 让服务器端的php能够判断验证的是什么
$.post('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')
})
//2.密码验证
$('#password1').blur(function () {
if ( $('#email').val().length == 0){
return false;
}
$.post('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').prev().focus()
} else {
$('td').find('span').remove()
}
}, 'json')
})
//3.确认密码
$('#password2').blur(function () {
if ( $('#email').val().length == 0 || $('#password1').val().length == 0){
return false;
}
//把数据写成json把数据传到php
$.post('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').prev().focus()
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','green')
break;
}
}, 'json')
})
//4.确认文字域
$('#comment').blur(function () {
if ( $('#email').val().length == 0 || $('#password1').val().length == 0 || $('#password2').val().length == 0 ) {
return false;
}
$.post('check.php?check=comment', 'comment=' + $('#comment').val(), function (data) {
if (data.status == 0){
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red').prev().focus()
} else if (data.status == 1) {
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red').prev().focus()
} else if (data.status == 2) {
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','green')
}
}, 'json')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
php服务器端代码如下：
实例
<?php
/**
* Created by PhpStorm.
* User: hongda
* Date: 17/04/2018
* Time: 10:58 PM
*/
//echo '<pre>';
//print_r($email);
//echo $_GET['check'];
//using the value of check from url to decide which input should be validated
switch ($_GET['check']){
//validate email
case 'email':
//get the value of email
$email=$_POST['email'];
//determine if the value of email is empty
if (empty($email)){
//using json_encode() to return jason
exit(json_encode(['status'=>0,'msg'=>'email should not be empty!']));
}
//determine if the value of email is admin
else if (in_array($email,['admin@php.cn','hongda@php.cn'])){
exit(json_encode(['status'=>1,'msg'=>'This email cannot be used!']));
}
//return right message if users` input is legal
else {
exit(json_encode(['status'=>2,'msg'=>'you can use this email!']));
}
break;
//validate password1
case 'password1':
//get the value of password1
$password1=$_POST['password1'];
//determine if the value of password1 is empty
if (empty($password1)){
//using json_encode() to return jason
exit(json_encode(['status'=>0,'msg'=>'password should not be empty!']));
}
//return right message if users` input is legal
else {
exit(json_encode(['status'=>1,'msg'=>'you can use this password!']));
}
break;
//validate confirm password
case 'password2':
//get the value of password1 and password2
$password1=$_POST['password1'];
$password2=$_POST['password2'];
//determine if the value of password2 is empty
if (empty($password2)){
//using json_encode() to return jason
exit(json_encode(['status'=>0,'msg'=>'confirm password should not be empty!']));
}
//determine if the value of password1 is not equal to password2
else if ($password1 != $password2) {
exit(json_encode(['status'=>1,'msg'=>'confirm password doesnot match first password']));
}
//return right message if users` input is legal
else {
exit(json_encode(['status'=>2,'msg'=>'password valiadation has passed']));
}
break;
//validate comment
case 'comment':
//get the value of password1 and comment
$comment=$_POST['comment'];
//determine if the value of comment is empty
if (empty($comment)){
//using json_encode() to return jason
exit(json_encode(['status'=>0,'msg'=>'text area should not be empty!']));
}
//determine if the length of comment is less or equal to 10
else if (strlen($comment) <= 10 ) {
exit(json_encode(['status'=>1,'msg'=>'text area too short input!']));
}
//return right message if users` input is legal
else {
exit(json_encode(['status'=>2,'msg'=>'text area valiadation has passed']));
}
break;
default:
break;
}
?>点击 "运行实例" 按钮查看在线实例
总结：
以上通过jQuery ajax 把用户输入的值传给 php进行验证，其中有很多小技巧：
比如在ajax异步传值给php的时候，用链接后面参数传给服务器端，这次的 blur事件触发的验证是验证用户输入的哪部分；
比如用switch语句来根据服务器端返回的json里的status来输出验证反馈给用户。
Correction status：qualified
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!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
