实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.用实例来创建用户表单</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: white;
}
form button:hover {
background-color: orangered;
font-size: 1.1em;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<table>
<caption>用户注册</caption>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="text" 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" for="male"><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female" for="female"><label for="female">女</label>
<input type="radio" name="gender" id="secret" value="secret" checked="" for="secret"><label for="secret">保密</label></td>
</tr>
<tr>
<td><label for="">级别:</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 for="PHP">语言:</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="C++" value="C++"><label for="C++"JavaScript">C++</label></td>
<tr>
<td><label for="comment">简介:</label></td>
<td><textarea name="conment" id="conment" cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" name="submit" id="submit" value="submit">提交</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//所有的表单数据的验证全部使用AJAX完成，但是为了代码的简洁与可读性，操作类型使用GET
//邮箱验证
$('#email').blur(function(){
//注意：这里是获取email的id，因此正确为：'#mail'
//采用post
$.post('admin/check.php?check=email','email='+$('#email').val(),function(data){ //url后面加?check=email; data用'email='+$拼接,属性为：'#mail' ， 回调函数为data ，即function(data)
switch(data.status){
case 0:
$('td').find('span').remove() //获取到所有的TD，查询所有的SPAN元素，杜绝掉！
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus() //当输入错误，自动把焦点移到SPAN前面的元素INPUT上面来并设置焦点！
break;
case 1:
$('td').find('span').remove() //获取到所有的TD，查询所有的SPAN元素，杜绝掉！
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus() //当输入错误，自动把焦点移到SPAN前面的元素INPUT上面来并设置焦点！
break;
case 2:
$('td').find('span').remove() //获取到所有的TD，查询所有的SPAN元素，杜绝掉！
$('#email').after('<span>').next().text(data.msg).css('color','green') //直到输入正确，邮箱可用，才允许跳转！
break;
}
},'json') //注意：此处是,'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) {
//以下#PASSOWD的必须加引号！！！
$('#password1').after('<span>').next().text(data.msg).css('color','red').prev().focus();
$('td').find('span').first().remove();
}
},'json') //此处的JSON必须要加引号!!
})
//确认密码验证：
$('#password2').blur(function(){
if($('#email').val().length ==0){
return false
}
if($('#password1').val().length ==0){
return false
}
$.post('admin/check.php?check=password2',{
password1: $('#password1').val(),
password2: $('#password2').val()
},function(data){
switch(data.status){ //根据data的statis状态来进行判断
case 0: //当前数据空值，注意：这里是冒号，不是分号，看清楚！！！
$('td').find('span').empty() //获取到所有的TD，查询所有的SPAN元素，杜绝掉！
$('#password2').after('<span>').next().text(data.msg).css('color','red').prev().focus() //当输入错误，自动把焦点移到SPAN前面的元素INPUT上面来并设置焦点！
break;
case 1:
$('td').find('span').remove() //获取到所有的TD，查询所有的SPAN元素，杜绝掉！
$('#password2').after('<span>').next().text(data.msg).css('color','red').prev().focus() //当输入错误，自动把焦点移到SPAN前面的元素INPUT上面来并设置焦点！*/
break;
case 2:
$('td').find('span').remove() //获取到所有的TD，查询所有的SPAN元素，杜绝掉！
$('#password2').after('<span>').next().text(data.msg).css('color','green') //直到输入正确，邮箱可用，才允许跳转！
break;
}
},'json') //此处的JSON必须要加引号!!
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
// echo '<pre>';
// print_r($_POST);
// echo $_GET['check'];
//用url中check值进行判断，确定验证的字段
switch ($_GET['check']) {
// echo '验证邮箱'; //测试数据
case 'email':
$email = $_POST['email']; //注意：设置邮箱的请求类型
if (empty($email)){ //不能用ISSET()验证，会出错。用empty()
// exit()['status' =>0,'msg'=>'邮箱不能为空']
// 三种状态判断结构：
exit(json_encode(['status' =>0,'msg' =>'邮箱不能为空'])); //exit(['status'=>0,'msg'=>'邮箱不能为空'])先输出一个数组;将一个字符串进行编码。
} else if (in_array($email,['admin@php.cn','kevinw@php.cn'])) { //注意：这里是in_array，别写错了！！！
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;
}
//注意这里的假设语句：
// switch ($_GET['check']) {
// case 'email':
// $email = $_POST['email'];
// if (empty($email)){
// exit(json_encode(['status' =>0,'msg' =>'中文']));
// } else if (in_array($mail,['admin@php.cn','kevinw@php.cn'])){
// exit(json_encode(['status' =>1,'msg' =>'中文']));
// } else {
// exif(json_encode(['status' =>2,'msg' =>'中文']))
// }
// break;
// }运行实例 »
点击 "运行实例" 按钮查看在线实例
