ajax实例的表单验证,Ajax+PHP注册表单验证实例

用ajax进行验证，可以增强与用户的交互，同时防止他人绕过前端

总结：1、传递表单值使用post方法，验证表单使用get方法，分工明确效率高

2、后台处理时要将数据编码为json；

3、要及时测试，发现问题和不合理处，出现死循环要在适当的地方加上断点；

4、if...else.. ;switch()要熟练掌握。

signin.php

实例

html>

Ajax+PHP注册表单实例

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}

用户注册

邮箱：
密码：
重复：
性别：	男 女 未知
级别：	小白 入门 精通
语言:	PHP PHP JAVA C
简介：
提交

$('#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('').next().text(data.msg).css('color','red').prev().focus();

break;

case 1:

$('td').find('span').remove()

$('#email').after('').next().text(data.msg).css('color','red').prev().focus();

break;

case 2:

$('td').find('span').remove()

$('#email').after('').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('').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('').next().text(data.msg).css('color','red').prev().focus();

break;

case 1:

$('td').find('span').remove()

$('#password2').after('').next().text(data.msg).css('color','red').prev().focus();

break;

case 2:

$('td').find('span').remove()

$('#password2').after('').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')

})

运行实例 »

点击 "运行实例" 按钮查看在线实例

check.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;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例