ajax和PHP实现无刷新表单后台验证：使用$.post方法传数据后台验证，返回json数值。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
width: 300px;
height: 280px;
background: lightskyblue;
margin:auto;
border-radius: 5px;
box-shadow: 5px 5px 5px gray;
text-align: left;
}
caption{
font-size: 1.5em;
margin-bottom: 10px;
}
textarea{
resize: none;
width: 180px;
margin:auto 10px;
}
input{
width: 180px;
height: 23px;
margin-top: 10px;
margin-left: 10px;
}
button{
width: 180px;
height: 40px;
background-color:green;
margin-left: 10px;
color: white;
font-size: 16px;
border:none;
}
button:hover{
font-size: 1.2em;
}
</style>
</head>
<body class="login">
<form action="">
<table>
<caption>欢迎注册</caption>
<tr>
<td>
<input type="text" name="email" id="email" placeholder="邮箱：abc@php.com"></td>
</tr>
<tr>
<td>
<input type="password" name="password1" id="password1" placeholder="密码"></td>
</tr>
<tr>
<td>
<input type="password" name="password2" id="password2" placeholder="确认密码"></td>
</tr>
<tr>
<td>
<textarea name="comment" id="comment" rows="5" cols="22"></textarea>
</td>
</tr>
<tr>
<td colspan="4" >
<button type="submit" name="submit" id="submit" value="submit">提交</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//邮箱验证
$('#email').blur(function(){
// alert('33')
$.post('admin/check.php?check=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');
break;
}
}, 'json')
})
//密码验证
$('#password1').blur(function(){
if ($('#email').val().length == 0) {
return false //输入密码前再次确认邮箱是否填写
}
$.post('check.php?check=password1','password1='+$('#password1').val(),function(data){
if (data.status == 0){
$('td').find('span').remove()
$('#password1').after('<span>').next().next(data.msg).css('color','red').prev().focus();
return false
}
},'json')
})
//确认密码验证
$('#password2').blur(function(){
if ($('#email').val().length == 0) {
return false //输入密码前再次确认邮箱是否填写
}
$.post('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')
//确认密码不对,应该将焦点设置到第一次的密码框内
$('#password1').focus()
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color', 'green')
break;
}
},'json')
})
//简介验证长度不能少于10个字符
$('#comment').blur(function(){
if ($('#email').val().length == 0 || $('#password1').val().length == 0 || $('#password1').val().length == 0) {
return false
}
$.post('admin/check.php?check=comment', 'comment='+$('#comment').val(), function(data){
switch(data.status) {
case 0:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 1:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
break;
case 2:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color', 'green').prev().focus();
break;
}
},'json')
})
//提交数据
$('#submit').click(function(){
if ($('#email').val().length == 0 || $('#password1').val().length == 0 || $('#password1').val().length == 0
|| $('#comment').val().length == 0) {
return false
}
$.post('admin/check.php?check=submit', $('#register').serialize(), function(data){
$('td').find('span').remove()
alert(data)
},'text')
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
