html代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP表单验证</title>
<style>
form{
width: 500px;
height: 600px;
background-color: lightsalmon;
margin: auto;
}
table{
margin: auto;
}
table tr td{
font-weight: bold;
color: #222222;
padding: 10px;
}
button{
width: 100px;
height: 30px;
margin-left: 100px;
background-color: #cccccc;
font-weight: bolder;
}
button:hover{
cursor: pointer;
background-color: sandybrown;
border: 1px solid red;
border-radius: 20%;
}
</style>
</head>
<body>
<form>
<table>
<caption><h2>用户注册</h2></caption>
<tr>
<td>
<label for="email">邮箱:</label>
</td>
<td>
<input type="text" name="email" id="email">
</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" value="man">男
<input type="radio" name="sex" value="woman">女
<input type="radio" name="sex" value="secret" id="secret" checked>保密
</td>
</tr>
<tr>
<td><label>级别:</label></td>
<td>
<select name="level">
<option value="0" selected>菜鸟程序猿</option>
<option value="1">程序猿</option>
<option value="2">攻城狮</option>
</select>
</td>
</tr>
<tr>
<td><label>语言:</label></td>
<td>
<input type="checkbox" name="language" value="php" checked>php
<input type="checkbox" name="language" value="php">java
<input type="checkbox" name="language" value="php">android
<input type="checkbox" name="language" value="php">ios
</td>
</tr>
<tr>
<td><label for="introduction">简介:</label></td>
<td>
<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button>提交</button>
</td>
</tr>
</table>
</form>
</body>
<script src="../jquery/jquery-3.2.1.min.js"></script>
<script>
$('#email').blur(function () {
// $.post(url,data,success)
$.post(
'form.php?checked=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').prev()
break
}
},'json')
})
//密码验证
$('#password1').blur(function () {
//检查邮箱输入
if ($('#email').val().length == 0) {
return false;
}
$.post(
'form.php?checked=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) {
return false;
}
if ($('#password1').val().length == 0) {
return false;
}
$.post(
'form.php?checked=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')
})
//简介
$('#introduction').blur(function () {
if($('#email').val().length ==0 || $('#password1').val().length ==0 ||$('#password1').val()!=$('#password2').val()){
return false
}
$.post(
'form.php?checked=introduction',
{
"introduction":$('#introduction').val()
},
function (data) {
switch(data.status) {
case 0:
$('td').find('span').remove()
$('#introduction').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break
case 1:
$('td').find('span').remove()
$('#introduction').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break
case 2:
$('td').find('span').remove()
$('#introduction').after('<span>').next().text(data.msg).css('color','green')
break
}
},'json')
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
php代码：
实例
<?php
switch ($_GET['checked']){
//验证邮箱
case 'email':
$email = $_POST['email'];
if(empty($email)){
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
}else if(in_array($email,['admin@php.com','php@php.cn'])){
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($password1 !=$password2){
exit(json_encode(['status'=>1,'msg'=>'两次密码不一致']));
}else{
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
//简介
case 'introduction':
$introduction=$_POST['introduction'];
if(empty($introduction)){
exit(json_encode(['status'=>0,'msg'=>'简介不能为空']));
}else if(strlen($introduction)<20){
exit(json_encode(['status'=>1,'msg'=>'简介字数不能小于20个字']));
}else{
exit(json_encode(['status'=>2,'msg'=>'简介说明已完成']));
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果图：
