目的：利用Jquery结合php，对前端输入内容进行简单验证
知识点：
switch：用于不同条件执行不同操作，类似于if语句。
效果图：
html实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #00BFFF;
color: #fff;
}
.bg{
background-color: burlywood;
width: 100%;
}
.top{
width: 100%;
height: 120px;
background-color: lightblue;
text-align: center;
}
.top span{
font-size: 4em;
color: darksalmon;
font-weight: bold;
line-height: 120px;
}
.mian{
width: 1000px;
margin: 50px auto;
border: 1px solid #ADD8E6;
border-radius: 10px;
box-shadow: 5px 5px 20px #000;
/*background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523956011282&di=a74c1c804094c7586a6e884339a46756&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201403%2F07%2F20140307192833_NxhcU.thumb.700_0.jpeg');*/
}
.reg_table{
width: 90%;
margin: auto;
text-align: center;
}
.reg_table table{
padding: 20px;
margin: auto;
text-align: center;
}
.reg_table table tr{
line-height: 50px;
}
.reg_table table td:first-child{
width: 80px;
}
.reg_table table td:nth-child(2){
text-align: left;
}
.reg_table table #username,#password1,#password2,#age{
width: 250px;
height: 30px;
text-align: center;
}
.reg_table textarea{
resize: none;
}
.reg_table button{
width: 250px;
height: 40px;
border: none;
background-color: coral;
color: #FFf;
font-weight: bold;
font-family: "微软雅黑";
cursor: pointer;
border-radius: 10px;
}
.reg_table button:hover{
background-color: crimson;
}
</style>
</head>
<body>
<div class="bg">
<div class="top"><span>顶部导航</span></div>
<div class="mian">
<div class="reg_table">
<form id="reg">
<h2>会员注册</h2>
<hr />
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td><label for="username">用户账号：</label></td>
<td><input type="text" name='username' id='username' placeholder="请输入用户账号" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">账号密码：</label></td>
<td><input type="password" name='password1' id='password1' placeholder="请输入用户密码"></td>
</tr>
<tr>
<td><label for="password2">重复密码：</label></td>
<td><input type="password" name='password2' id='password2' placeholder="请重复输入密码"></td>
</tr>
<tr>
<td><label for="">用户性别：</label></td>
<td><input type="radio" name="gender" id="boy" value="boy" >男
<input type="radio" name="gender" id="girl" value="girl" >女
<input type="radio" name="gender" id="secret" value="secret" checked="">保密
</td>
</tr>
<tr>
<td><label for="">个人兴趣：</label></td>
<td><input type="checkbox" name="hobby[]" id="basketball" value="basketball" /><label for="basketball">篮球</label>
<input type="checkbox" name="hobby[]" id="read" value="read" /><label for="read">读书</label>
<input type="checkbox" name="hobby[]" id="movie" value="movie" /><label for="movie">电影</label>
<input type="checkbox" name="hobby[]" id="others" value="others" checked=""/><label for="others">其他</label>
</td>
</tr>
<tr>
<td><label for="">用户年龄：</label></td>
<td><select name="age" id="age">
<option value="15">小于15岁</option>
<option value="20">小于20岁</option>
<option value="25">小于25岁</option>
<option value="30">小于30岁</option>
</select></td>
</tr>
<tr>
<td><label for="">个性签名：</label></td>
<td colspan="2"><textarea name="signature" id="signature" rows="8" cols="50" placeholder="请简单描述您的个人状况"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center"><button name='submit' id='submit' value="submit">注册提交</button></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
//账号编辑框激活状态移出事件
$('#username').blur(function(){
var username = $('#username').val()
//POST提交验证用户名
$.post('core/reg_check.php?check=username','username='+username,function(data){
//根据返回状态码在用户名输入框后添加span元素，即提示信息
switch(data.status){
case 0:
//状态码返回0
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#username').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
case 1:
//状态码返回1
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#username').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
case 2:
//状态码返回2
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为绿色，并使输入框激活
$('#username').after('<span>').next().text('*'+data.msg).css('color','#12a900')
break
}
},'json')
})
//密码编辑框激活状态移出事件
$('#password1').blur(function(){
if($('#username').val().length==0){
return false
}
var password1= $('#password1').val()
//POST提交验证密码
$.post('core/reg_check.php?check=password1','password1='+password1,function(data){
//根据返回状态码在密码输入框后添加span元素，即提示信息
switch(data.status){
case 0:
//状态码返回0
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#password1').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
case 1:
//状态码返回1
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#password1').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
}
},'json')
})
//重复密码编辑框激活状态移出事件
$('#password2').blur(function(){
if($('#username').val().length==0 || $('#password1').val().length<6){
return false
}
//POST提交验证重复密码
$.post('core/reg_check.php?check=password2',{password1:$('#password1').val(),password2:$('#password2').val()},function(data){
//根据返回状态码在重复密码输入框后添加span元素，即提示信息
switch(data.status){
case 0:
//状态码返回0
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#password2').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
case 1:
//状态码返回1
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色
$('#password2').after('<span>').next().text('*'+data.msg).css('color','#ff0000')
//第二次重复密码设置第一次的密码输入框激活
$('#password1').focus()
break
case 2:
//状态码返回2
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为绿色
$('#password2').after('<span>').next().text('*'+data.msg).css('color','#12a900')
break
}
},'json')
})
//个人简介文本域激活状态移出事件
$('#signature').blur(function(){
if ($('#username').val().length==0 || $('#password1').val().length==0 || $('#password2').val().length==0) {
return false
}
//POST提交验证个人简介
$.post('core/reg_check.php?check=signature','signature='+$('#signature').val(),function(data){
//根据返回状态码在个人简介文本域后添加span元素，即提示信息
switch(data.status){
case 0:
//状态码返回0
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#signature').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
case 1:
//状态码返回1
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#signature').after('<span>').next().text('*'+data.msg).css('color','#ff0000').prev().focus()
break
case 2:
//状态码返回1
$('td').find('span').remove()//移除span标签
//该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色为红色，并使输入框激活
$('#signature').after('<span>').next().text(data.msg).css('color','#12a900')
break
}
},'json')
})
//注册按钮点击事件
$('#submit').click(function(){
//POST提交注册数据
$.post('core/reg_check.php?check=submit',$('#reg').serialize(),function(data){
$('td').find('span').remove()//移除span标签
alert(data) //返回注册提交后的成功信息
},'text')
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
switch ($_GET['check']) //判断获得的get提交的check的值
{
case 'username':
$username = $_POST['username']; //将post取得的username值设为变量
if(empty($username)){//判断是否为空
exit(json_encode(['status'=>0,'msg'=>'用户名不得为空']));//输出json格式的状态和提示信息
}else if(in_array($username, ['admin','admin888','maozedong','123456'])){
exit(json_encode(['status'=>1,'msg'=>'用户名禁止使用']));//输出json格式的状态和提示信息
}else{
echo json_encode(['status'=>2,'msg'=>'用户名可用']);//输出json格式的状态和提示信息
}
break;
case 'password1':
$password1 = $_POST['password1'];
if(empty($password1)){
exit(json_encode(['status'=>0,'msg'=>'用户密码不得为空']));//输出json格式的状态和提示信息
}else if(strlen($password1)<6){
exit(json_encode(['status'=>1,'msg'=>'密码长度不得小于6']));//输出json格式的状态和提示信息
}
break;
case 'password2':
$password1 = $_POST['password1'];
$password2 = $_POST['password2'];
if(empty($password2)){
exit(json_encode(['status'=>0,'msg'=>'重复密码不得为空']));//输出json格式的状态和提示信息
}else if($password2 != $password1){//将2个密码值做比较。
exit(json_encode(['status'=>1,'msg'=>'重复密码输入不正确']));//输出json格式的状态和提示信息
}else if($password2 == $password1){
echo json_encode(['status'=>2,'msg'=>'重复输入验证成功']);//输出json格式的状态和提示信息
}
break;
case 'signature':
$signature = $_POST['signature'];
if(empty($signature)){
exit(json_encode(['status'=>0,'msg'=>'个人简介不得为空']));//输出json格式的状态和提示信息
}else if(strlen($signature)<20){
exit(json_encode(['status'=>1,'msg'=>'简介不得少于20字']));//输出json格式的状态和提示信息
}else{
exit(json_encode(['status'=>2,'msg'=>'']));
}
break;
case 'submit':
exit('注册成功');
break;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、代码里的括号和分号一定要注意，一不小心就忘记或位置错误。
2、给元素设置name和id时一定不要搞错，后面我写JS代码搞错了个字母，结果查错好久。
