jquery validate和validform验证插件的对比

此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：

1、样式

2、普通验证： 3、自定义验证： 4、Ajax验证：

一、样式

1、Jquery（可自定义提示信息样式，下图摘自官方文档）：

2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：

二、普通验证

1、Jquery：

Jquery支持两种方式验证：1、直接将规则绑定到元素上。2、将规则写在初始化js中

1、直接将规则绑定到元素上。

验证一个完整的表单

Email

喜欢的颜色 红色 蓝色 黄色

电话

地址

头像

请同意我们的条款

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\ 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\} 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\":/^[\一-\龥\豈-\鶴]{2,4}$/ } }); 元素： 四、ajax验证

1、Jquery在初始化js的方法中加入：

remote: { url: \"check-email.php\ //后台处理程序 type: \"post\ //数据发送方式 dataType: \"json\ //接受数据格式 data: { //要传递的数据 username: function() { return $(\"#username\").val(); } } } 2、Validform在要验证的元素上加入：