“暗暗淡淡紫,融融洽洽黄”
序
对于表单的校验,相信这几乎在所有的应用都是存在的,注册和登录都会用到。
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
使用
如下:
$("#yourForm").validate({
//验证规则
rules : {
name : {
required : true
},
username : {
required : true,
minlength : 11,
remote : {
url : "/exit", // 后台处理程序
type : "post", // 数据发送方式
dataType : "json", // 接受数据格式
data : { // 要传递的数据
username : function() {
return $("#username").val();
}
}
}
},
password : {
required : true,
minlength : 6
},
deptId : {
required : true
},
confirm_password : {
required : true,
minlength : 6,
equalTo : "#password"
},
email : {
required : true,
email : true
},
topic : {
required : "#newsletter:checked",
minlength : 2
},
agree : "required"
},
messages : {
//提示信息
name : {
required : icon + "请输入姓名"
},
username : {
required : icon + "请输入您的手机号码",
minlength : icon + "手机号码必须11位数",
remote : icon + "手机号码已经存在"
},
deptId : {
required : icon + "请选择部门"
},
password : {
required : icon + "请输入您的密码",
minlength : icon + "密码必须6个字符以上"
},
confirm_password : {
required : icon + "请再次输入密码",
minlength : icon + "密码必须6个字符以上",
equalTo : icon + "两次输入的密码不一致"
},
email : icon + "请输入您的E-mail",
}
})
还可以自定义规则,如下:
//自定义手机号验证
jQuery.validator.addMethod("isPhoneNum", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
使用自定义校验:
$("#signupForm").validate({
rules : {
phone: {
//上面自定义的规则
isPhoneNum:true,
},
},
messages : {
phone: {
isPhoneNum:icon+"请输入正确的手机号码"
},
}
})
具体参考:jQuery校验表单