jquery validate验证插件验证规则的三种定义方式

jquery.validate验证插件，最重要的就是定义验证规则，验证规则的定义，主要有以下几种：

1. 表单项属性定义

<input type="text" name="username" required minlength="2" maxlength="10" /> <input type="text" name="mail" required email="true" />

内置支持的属性可参照 http://jqueryvalidation.org/documentation/

这种方式感觉相当不好，弄得比较混乱

2. 使用javascript代码

$("#form1").validate({ rules : {    username : {required:true, minlength:3,maxlength:10,message:xxx},    mail : {required:false,email:true} } });

缺点：需要编写javascript代码。优点是较为灵活，个人不太喜欢这种方式

3. 使用metadata方式
这个需要使用jquery.metadata.js插件才可工作，通过在表单项中定义特殊的属性来指定验证规则

但是我发现最新的jquery.validate 1.11竟然没有内置metadata的支持，故需要对其进行一些改造

搜索jquery.validate.js文件中的$.validator.classRules(element)，并在其前加入以下行： $.validator.metadataRules(element), 再搜索 staticRules:， 在其前面加入以下代码，增加metadata的支持: metadataRules: function(element) { if (!$.metadata) return {}; var meta = $.data(element.form, 'validator').settings.meta; return meta ? $(element).metadata()[meta] : $(element).metadata(); },

到这里，就改造完成了,要使用metadata，页面中使用以下方式(省略了其它代码)：

<script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.metadata.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <form> <input name="user" class="{required:true,minlength:3}" /> </form>

但是默认的class是用来定义css样式类名的，在这里作为作为验证规则使用，会造给样式维护带来太多不便的, 有两种方式解决这个问题：

A. 直接修改 jquery.metadata.js,  type修改为attr, name修改为validate，表示从表单项的validate属性取得验证规则

B. 在页头中调用 $.metadata.setType('attr','validate'), 表示从表单项的validate属性取得验证规则