html：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax与PHP实现表单验证</title>
<style type="text/css">
table{
margin: 40px auto;
border: double;
background-color: lightgreen;
padding:30px 10px;
border-radius: 9px;
}
caption{
font-size: 1.5em;
font-weight: bolder;
margin-bottom: 15px;
color: red;
}
td{
padding-bottom: 8px;
}
textarea{
resize: none;
}
button{
width: 100px;
height: 30px;
background-color: skyblue;
color: white;
border: none;
}
button:hover{
font-size: 1.1em;
font-weight: bolder;
background-color: orangered;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<table>
<caption>用户注册表</caption>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="email" name="email" id="email" autofocus="" placeholder="123456@qq.com"></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="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
<input type="radio" name="sex" id="secret" checked=""><label for="secret">保密</label>
</td>
</tr>
<tr>
<td><label for="student">学历：</label></td>
<td>
<select name="student" id="student">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected="">大学</option>
<option value="4">研究生</option>
</select>
</td>
</tr>
<tr>
<td><label for="">爱好：</label></td>
<td>
<input type="checkbox" name="baskball" id="baskball" ><label for="baskball">篮球</label>
<input type="checkbox" name="football" id="football" checked=""><label for="football">足球</label>
<input type="checkbox" name="ping-pongball" id="ping-pongball"><label for="ping-pongball">乒乓球</label>
<input type="checkbox" name="badminton" id="badminton"><label for="badminton">羽毛球</label>
</td>
</tr>
<tr>
<td><label for="textarea">简介：</label></td>
<td>
<textarea cols="30" rows="3" id="textarea" name="textarea"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><button type="submit" id="button">提交</button></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#email').blur(function(){
$.post(
'admin/post.php?check=email',//URL地址再赋值一个值，通过get发送
'email='+$('#email').val(),//字符串拼接获取email的值
function(data){//参数data
switch(data.status){//获取状态
case 0:
$('td').find('span').remove()//删除提示，以免重复
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus()//在email控件后面添加一个<span>元素，再选择到自身（<span>），再给其自身添加post.php返回的文字信息，并设置成红色，再返回到email聚集焦点
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($('#password1').val().length == 0){
return false
}
$.post(
'admin/post.php?check=password1',
'password1='+$('#password1').val(),
function(data){
// switch(data.status){
// case 0:
// $('td').find('span').remove()
// $('#password1').after('<span>').next().text(data.msg).css('color','red').prev().focus()
// break;
if(data.status==0){
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color','red').prev().focus()
}
// }
}, 'json')
})
$('#password2').blur(function(){
if($('#password2').val().length == 0){
return false
}
$.post(
'admin/post.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'
)
})
$('#textarea').blur(function(){
if($('#textarea').val().length == 0){
return false}
$.post(
'admin/post.php?check=textarea',
'textarea='+$('#textarea').val(),
function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#textarea').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#textarea').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 2:
$('td').find('span').remove()
$('#textarea').after('<span>').next().text(data.msg).css('color','green')
break;
}
},
'json'
)
})
$('#button').on('click',function(){
location.href('php/a.php')
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
PHP：
实例
<?php
// echo '<pre>';
// print_r($_POST);
// echo $_GET['check'];
switch ($_GET['check']) {
//验证邮箱
case 'email':
$email = $_POST['email'];//通过$_POST获得email的值再赋值给变量$email
if(empty($email)){
//判断是否为空
exit(json_encode(['status'=> 0,'msg'=>'邮箱不能为空']));
//判断是否在该数组中
}else if(in_array($email,['happy@qq.com','demo@qq.com'])){
exit(json_encode(['status'=> 1,'msg'=>'邮箱被占用']));
}else{
exit(json_encode(['status'=> 2,'msg'=>'此邮箱可用']));
}
break;
//验证密码
case 'password1':
$password1 = $_POST['password1'];
if(empty($password1)){
exit(json_encode(['status'=> 0,'msg'=>'密码不能为空']));
}
break;
//验证确认
case 'password2':
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
if(empty($password2)){
exit(json_encode(['status'=> 0,'msg'=>'确认不能为空']));
}else if($password2 != $password1){
//判断前后两个的密码是否一致
exit(json_encode(['status'=>1 , 'msg' => '密码不一致']));
}else{
exit(json_encode(['status'=>2 , 'msg' => '密码可用']));
}
break;
//判断文本域
case 'textarea':
$textarea = $_POST['textarea'];
if(empty($textarea)){
exit(json_encode(['status'=> 0,'msg'=>'文本不能为空']));
//判断文本域内的字不能少于10个
}else if(mb_strlen( $textarea)<10){
exit(json_encode(['status'=> 1,'msg'=>'不能少于10个字']));
}else{
exit(json_encode(['status'=> 2,'msg'=>'顺利通过']));
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
