用ajax进行验证，可以增强与用户的交互，同时防止他人绕过前端
总结：1、传递表单值使用post方法，验证表单使用get方法，分工明确效率高
2、后台处理时要将数据编码为json；
3、要及时测试，发现问题和不合理处，出现死循环要在适当的地方加上断点；
4、if...else.. ;switch()要熟练掌握。
signin.php
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax+PHP注册表单实例</title>
</head>
<style type="text/css">
table{margin:30px auto;background-color: pink;border-radius: 3%;padding:10px;box-shadow: 3px 3px 3px #888}
table td{padding: 5px}
table caption{font-size: 1.5em;margin-bottom: 20px}
textarea{resize: none;}
table button{width:80px;height:30px;border:none;color:#fff;background-color: lightskyblue;cursor: pointer;border-radius: 5%}
table button:hover{background: orange;font-size: 1.1em}
</style>
<body>
<form>
<table>
<caption>用户注册</caption>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="text" name="email" id="email" value="" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">密码：</label></td>
<td><input type="password" name="password1" id="password1" value=""></td>
</tr>
<tr>
<td><label for="password2">重复：</label></td>
<td><input type="password" name="password2" id="password2" value=""></td>
</tr>
<tr>
<td><label for="unknow">性别：</label></td>
<td>
<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
<input type="radio" name="sex" id="unknow" value="unknow" checked><label for="unknow">未知</label>
</td>
</tr>
<tr>
<td><label for="level">级别：</label></td>
<td>
<select name="level" id="level">
<option value="0">小白</option>
<option value="1">入门</option>
<option value="2" selected="">精通</option>
</select>
</td>
</tr>
<tr>
<td><label for="lang">语言:</label></td>
<td>
<input type="checkbox" name="lang[]" value="php" id="php" checked><label for="php">PHP</label>
<input type="checkbox" name="lang[]" value="python" id="python"><label for="python">PHP</label>
<input type="checkbox" name="lang[]" value="java" id="java"><label for="java">JAVA</label>
<input type="checkbox" name="lang[]" value="C" id="C"><label for="C">C</label>
</td>
</tr>
<tr>
<td><label for="textarea">简介：</label></td>
<td>
<textarea rows="3" cols="30" id="textarea"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><p id="tags"></p></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" value="submit" name="submit" id="submit">提交</button>
</td>
</tr>
</table>
</form>
<!-- 引入jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#email').blur(function(){
// 失去焦点后触发事件函数
//使用post方式提价get数据
$.post('admin/check.php?check=email', 'email='+$('#email').val(), function(data){
switch(data.status){//switch函数判断返回值
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')
break;
}
},'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){
$('td').find('span').remove()
$('#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('admin/check.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 ($('#email').val().length == 0) {
return false
}
if
($('#password1').val().length == 0) {
return false
}
if
($('#password2').val().length == 0) {
return false
}
$.post("admin/check.php?check=comment", 'comment='+$('textarea').val(), function(data){
switch(data.status){
case 0:
$('textarea').next().empty()
$('#tags').text(data.msg).css({'color':'red','text-align':'center'})
$('textarea').focus();
break;
case 1:
$('textarea').next().empty()
$('#tags').text(data.msg).css({'color':'red','text-align':'center'})
$('textarea').focus()
break;
case 2:
$('#tags').empty()
$('#tags').text(data.msg).css({'color':'green','text-align':'center'})
break;
}
},'json')
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
check.php
实例
<?php
//根据get数据，使用switch判断
switch ($_GET['check']) {
case 'email':
$email=$_POST['email'];//将post数据进行赋值，简化代码
if(empty($email)){
// 返回json数据，需要用json_encode()转换
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空！']));
}else if(in_array($email, ['admin@php.cn','php@php.cn'])){//检测是否存在于数组中
exit(json_encode(['status'=>1,'msg'=>'邮箱已存在！']));
}else{
echo 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 'comment':
$comment=$_POST['comment'];
if(empty($comment)){
exit(json_encode(['status'=>0,'msg'=>'内容长度不能为空！']));
}else if(strlen($comment)<=10){
exit(json_encode(['status'=>1,'msg'=>'内容长度必须大于10个字符！']));
}else{
echo json_encode(['status'=>2,'msg'=>'内容正确！可以提交']);
}
break;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
