jquery validate和validform验证插件的对比
此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：
1、样式
2、普通验证：
3、自定义验证：
4、Ajax验证：
一、样式
1、Jquery（可自定义提示信息样式，下图摘自官方文档）：
2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：
二、普通验证
1、Jquery：
Jquery支持两种方式验证：1、直接将规则绑定到元素上。2、将规则写在初始化js 中
1、直接将规则绑定到元素上。
2、将规则下载初始化js中
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
});
});
2、Validform：
Validform也支持两种：1、直接将规则绑定到元素上。2、将规则写在初始化js中
1、直接将规则绑定到元素上
2、将规则写在初始化js中
demo.addRule([
{
ele:"#name",
datatype:"s6-18",
ajaxurl:"valid.php",
nullmsg:"请输入昵称！",
errormsg:"昵称至少6个字符,最多18个字符！"
},
{
ele:"#userpassword",
datatype:"*6-16",
nullmsg:"请设置密码！",
errormsg:"密码范围在6~16位之间！"
},
{
ele:"#userpassword2",
datatype:"*",
recheck:"userpassword",
nullmsg:"请再输入一次密码！",
errormsg:"您两次输入的账号密码不一致！"
}
]);
三、自定义验证
1、Jquery：
addMethod(name,method,message)方法
参数name 是添加的方法的名字。
参数method 是一个函数，接收三个参数(value,element,param) 。
value 是元素的值，element 是元素本身，param 是参数。
我们可以用addMethod 来添加除内置的Validation 方法之外的验证方法。比如有一个字段，只能输一个字母，范围是a-f，写法如下：
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},"必须是一个字母,且a-f");
如果有个表单字段的id="username"，则在rules 中写：
username:{
af:["a","f"]
}
addMethod 的第一个参数，是添加的验证方法的名字，这时是af。
addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。如果只有一个参数，直接写，比如af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在[] 里，用逗号分开。
2、Validform：
$(".demoform").Validform({
datatype:{
"phone":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值，
//obj为当前表单元素，
//curform为当前验证的表单，
//regxp为内置的一些正则表达式的引用。
//return false表示验证出错，没有return或者return true表示验证通过。
},
"zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/
}
});
元素：
四、ajax验证
1、Jquery在初始化js的方法中加入：
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
2、Validform在要验证的元素上加入：