jquery.validate框架

最近改bug的时候 在注册界面中，需要校验输入的数据，向注册的用户名的长度，字符的有效性，唯一性，邮箱的邮箱性，当时规定邮箱必须满足6~18位，不能包含除"@","."以外的特殊字符，其实这里只是防止恶意邮箱的注册，毕竟有专门的注册网站校验，这里只是填写而已。另外涉及到密码的位数校验和两次校验。
如果是以前的话，直接用js处理，获取id ，然后进行相关的校验，也许大部分代码在html中完成，也有部分在后台完成。比如密码两次输入的校验。
上述逻辑应该说很正常，但是代码量实际上很大，而且还要考虑提示框，还要修改body。这里应用jquery.validate()框架，可以很好的实现上述校验，不仅代码大量减少，而且很规范，也容易维护。
下面就介绍，使用这个校验框架的收获。

默认校验规则：
((1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

有了上述的默认规则，其实可以校验很多了，比如输入格式控制，字数，内容。密码的前后是否一致控制。
另外，默认规则不能包含所有，有些规则需要自定义，jquery validate也提供了自定义校验规则。 比如邮箱的校验和电话号码的校验。
这里发布一个例子
$(document).ready(function() {
jQuery.validator.addMethod("specialChar", function(value, element) {
var reg = /[\(\)\{\}\[\]\?\-<>~!@#$%^&*'"\/\\.;,:\|]/g;
return this.optional(element)||(!reg.test(value));
});

jQuery.validator.addMethod("specialCharEmail", function(value, element) {
var reg = /[\(\)\{\}\[\]\?\-<>~!_#$%^&*'"\/\\;,:\|]/g;
return this.optional(element)||(!reg.test(value));
});

$('#regform').validate({
rules: {
"user.loginName":{
required: true,
minlength: 5,
maxlength: 20,
specialChar:true,
remote:"<%=path%>/public/right_userIsExist"
},
"user.password":{
required: true,
minlength: 6,
maxlength:20
},
password2: {
required: true,
minlength: 6,
maxlength:20,
equalTo: "#password"
},
"user.email": {
required: true,
email:true,
minlength: 6,
maxlength:30,
specialCharEmail:true,
remote:"<%=path%>/public/right_validateEmailIsExit"
},
"user.pinganMember":{
remote:"<%=path%>/public/right_validateSN"
}
},
messages:{
"user.loginName":{
required: "请输入5-20个字符",
minlength:"请输入5-20个字符",
maxlength: "请输入5-20个字符",
specialChar:"会员名不能包含\"_\"以外的特殊字符",
remote:"用户已存在"
},
"user.password":{
required: "请输入6-20个字符",
minlength: "请输入6-20个字符",
maxlength:"请输入6-20个字符"
},
password2: {
required: "请输入6-20个字符",
minlength: "请输入6-20个字符",
maxlength:"请输入6-20个字符",
equalTo: "您两次输入的密码不一致"
},
"user.email": {
required: "请输入有效的邮箱地址",
email:"请输入有效的邮箱地址",
maxlength: "邮箱长度不能超过20个字符符",
specialCharEmail:"email不能包含\"@\"和\".\"以外的特殊字符",
remote:"该邮箱已经注册"
},
"user.pinganMember":{
remote:"Vitality会员验证失败"
}
},
errorPlacement: function(error, element) {
var errorMsg = "<span class=\"om\" generated=\"true\">";
errorMsg = errorMsg+$(error).html()+"</span>"
var msg = $("#"+element.attr("id")+"_att");
msg.find(".error").attr("style","display:block");
msg.find(".attention").attr("style","display:none;");
msg.find(".error").html(errorMsg);
msg.find(".load").attr("style","display:none");
},
success: function(label) {
var msg = $("#"+label.attr('for')+"_att");
msg.find(".error").attr("style","display:none");
msg.find(".attention").attr("style","display:none;");
msg.find(".load").attr("style","display:none");
},
submitHandler: function() {
register();
},
onkeyup: false
}
)

$("#loginName").blur(function(){
if($(this).val()){
$("#loadLoginName").attr("style","display:block");
$("#loadLoginName").html('<span style=\"color:red;\"><img src=\"<%=path %>/resources/images/indicator.gif\" width=\"16\" height=\"16\" />正在检查用户，请稍候...</span>');
$('#loginName_att').find(".attention").attr("style","display:none;");
$('#loginName_att').find(".error").attr("style","display:none;");
}
$("#regform").validate().element("#loginName");
});


$("#email").blur(function(){
if($(this).val()){
$("#loadEmail").attr("style","display:block");
$("#loadEmail").html('<span style=\"color:red;\"><img src=\"<%=path %>/resources/images/indicator.gif\" width=\"16\" height=\"16\" />正在验证email，请稍候...</span>');
$('#email_att').find(".attention").attr("style","display:none;");
$('#email_att').find(".error").attr("style","display:none;");
//$("#email").focus();
}
$("#regform").validate().element("#email");
});

$("#pinganMember").blur(function(){
if($(this).val()){
$("#loadPinganMember").attr("style","display:block");
$("#loadPinganMember").html('<span style=\"color:red;\"><img src=\"<%=path %>/resources/images/indicator.gif\" width=\"16\" height=\"16\" />正在验证SN号，请稍候...</span>');
$('#pinganMember_att').find(".attention").attr("style","display:none;");
$('#pinganMember_att').find(".error").attr("style","display:none;");
}
$("#regform").validate().element("#pinganMember");
});

//校验邮箱
/*
$("#email").blur(function(){
var email = document.getElementById('email').value;
if (email!= ""){
var pattern=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(!(pattern.test(email))){
$("#loademail").attr("style","display:block");
$("#loademail").html(
"<font color='black' size='4' face='arial'>很大</font>");
$("#email").focus();
return false;
}
}
});
*/
});

只有通过了校验 才能提交成功。
在这个注册校验中，校验了用户名 只能输入5-20位数字，字母或数字，校验邮箱只能输入6-20位数字或字母，不能包含除"."或"@"的特殊字符。同时，这里的远程调用也很方便，提供相应的url即可，前提是相应的功能模块要实现。