如何用ajax实现表单验证,利用jQuery实现表单验证功能

*{

margin: 0px;

padding: 0px;

font-family: 微软雅黑;

}

form span{

color: #f00;

font-weight: bold;

display: none;

}

用户名：

用户名不能为空

密码：

长度必须为6位

确认密码：

两次密码必须为一致

提交

// 用户名验证

$('input[name=userName]').blur(function(){

val=$(this).val();   // 获取用户名

if(val.length==0){

//a=0;

$(this).data({'num':0});   // 绑定属性

$(this).next().show();  // 显示提示消息

}else{

//a=1;

$(this).data({'num':1});

$(this).next().hide();  // 隐藏掉提示信息

}

});

// 密码验证

$('input[name=pwd]').blur(function(){val=this.value;   // 获取密码if(val.length<6){    //b=0;    $(this).data({'num':0});   // 绑定属性    $(this).next().show();    // 显示提示信息}else{    //b=1;    $(this).data({'num':1});   // 绑定属性    $(this).next().hide();   // 隐藏掉提示信息}

});

// 确认密码验证

$('input[name=rePwd]').blur(function(){

pwd=$('input[name=pwd]').val();    // 获取密码

repwd=$(this).val();    // 获取确认密码

if(pwd!=repwd){

//c=0;

$(this).data({'num':0});   // 绑定属性

$(this).next().show();   // 显示提示消息

}else{

//c=1;

$(this).data({'num':1});   // 绑定属性

$(this).next().hide();   // 隐藏掉提示信息

}

});

// 表单提交

$('form').submit(function(){

// 让3个文本框失去焦点

$('input.auth').blur();  // 失去焦点的方法

// r=a+b+c;

// if(r==3){

//  return true;  // 提交表单

// }else{

//  return false;   // 阻止表单提交

// }

//

// 第二种方式

r=0;

$('input.auth').each(function(){

r+=$(this).data('num');   // 收集数据

});

if(r==3)

return true;   // 提交表单

else

return false;  // 不提交表单

});