![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
本实例通过使用AJAX+PHP实现对表单数据的无刷新验证，代码如下：
主页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP处理表单实例</title>
<style type="text/css">
table {
background-color: wheat;
box-shadow: 3px 3px 3px #888;
border-radius: 3%;
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: #fff;
}
form button:hover {
background-color: orange;
font-size: 1.1em;
cursor: pointer;
}
</style>
</head>
<body>
<form id="register">
<table>
<caption>用户注册</caption>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="email" name="email" 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>
</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" align="center">
<button type="submit" name="submit" id="submit" value="submit">提交</button>
</td>
</tr>
</table>
</form>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
//邮箱验证
$('#email').blur(function(){
$.post('admin/check.php?check=email','email='+$('#email').val(),function(data){
$('td').find('span').remove()
switch(data.status) {
case 0:
$('#email').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('#email').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('#email').after('<span>').next().text(data.msg).css('color', 'green');
break;
}
},'json')
})
//密码验证
$('#password1').blur(function(){
if($('#email').val().length == 0){
return false
}
$('td').find('span').remove()
$.post('admin/check.php?check=password1','password1='+$('#password1').val(),function(data){
if (data.status == 0) {
$('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
}
},'json')
})
//确认密码验证
$('#password2').blur(function(){
if($('#email').val().length == 0 || $('#password1').val().length == 0){
return false
}
$('td').find('span').remove()
$.post('admin/check.php?check=password2',{
password2: $('#password2').val(),
password1: $('#password1').val()
},function(data){
switch(data.status) {
case 0:
$('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('#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
}
$('td').find('span').remove()
$.post('admin/check.php?check=comment','comment='+$('#comment').val(),function(data){
switch(data.status) {
case 0:
$('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('#comment').after('<span>').next().text(data.msg).css('color', 'green');
break;
}
},'json')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
后台验证代码：
<?php
// echo $_GET['check'];
//使用url中的check值进行验证
switch ($_GET['check']) {
//验证邮箱
case 'email':
$email = $_POST['email'];
if (!$email) {
exit(json_encode(['status'=>0,'msg'=>'请输入邮箱']));
} else if (in_array($email,['admin@php.cn','peter@163.com'])){
exit(json_encode(['status'=>1,'msg'=>'该邮箱已注册']));
} else {
exit(json_encode(['status'=>2,'msg'=>'恭喜，该邮箱可用']));
}
break;
//验证密码
case 'password1':
$password1 = $_POST['password1'];
if (!$password1) {
exit(json_encode(['status'=>0,'msg'=>'请输入密码']));
}
break;
//验证确认密码
case 'password2':
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
if (!$password2) {
exit(json_encode(['status'=>0,'msg'=>'请输入确认密码']));
} else if ($password1 != $password2) {
exit(json_encode(['status'=>1,'msg'=>'密码与确认密码不一致']));
} else {
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
case 'comment':
$comment = $_POST['comment'];
if (!$comment) {
exit(json_encode(['status'=>0,'msg'=>'请输入简介信息']));
} else if (strlen($comment) < 10) {
exit(json_encode(['status'=>1,'msg'=>'简介信息不小于10个字']));
} else {
exit(json_encode(['status'=>2,'msg'=>'通过']));
}
break;
}点击 "运行实例" 按钮查看在线实例
本实例通过前后端交互，将前端数据提交至服务器进行验证，服务器将验证信息实时反馈到前端，实现了无刷新验证，有利于提升用户体验。本实例尚不完善，仍存在一些问题，鉴于目前技术有限，待技术成熟再加完善，此次的核心技术是通过blur方法使输入框失去焦点时触发验证请求，服务器将验证后的信息提示返回前端，前端通过jQuery对DOM的控制将提示信息显示在表单中，以便用户能够尽早的指导数据的合法性。
