标签：
easyui为我们提供了validatebox类型的组件，使用它可以完成自动验证，十分方便。要注意的是，easyui中的各个组件都是有继承关系的。通过查看api，textbox继承validatebox，而其他的组件类型又直接或间接的继承textbox，所以，只要使用了easyui form插件中的一类，那么自然的我们就能使用它的验证框架。
一.自带验证类型
easyui-validatebox为我们提供了基本的验证，有五种，分别为required、email、url、length[0,100]、remote[‘http://.../action.do‘,‘paramName‘]。
<input type="text" name="a" class="easyui-validatebox" data-options="required:true"> <input type="text" name="b" class="easyui-validatebox" data-options="required:true,validType:‘email‘"> <input type="text" name="c" class="easyui-validatebox" data-options="required:true,validType:length[6,9]"> <!-- easyui 1.3.2以后可用 --> <input type="text" name="d" class="easyui-validatebox" data-options="required:true,validType:[‘email‘,‘length[6,9]‘]">
<!-- remote类型就不演示了，因为它本质上是ajax验证，但ajax一般是要有特殊处理的，大家自己调用ajax进行验证就好 -->
这样来看easyui-validatebox是不是使用起来非常简单呢？不过，它只为我们提供了比较基础的验证类型， 如果有更多的要求，我们就需要自己自定义验证类型了。
二.自定义验证类型：
1.api提供的自定义验证类型
$.extend($.fn.validatebox.defaults.rules, { //验证两个输入框相等 equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: ‘Field do not match.‘ }, //输入的最小长度 minLength: { validator: function(value, param){ return value.length >= param[0]; }, message: ‘Please enter at least {0} characters.‘ } });
<!-- 验证两次输入的密码是否相等 --> <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"> <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals[‘#pwd‘]"> <!-- 验证输入字段的最小长度 --> <input class="easyui-validatebox" data-options="validType:‘minLength[5]‘">
当我们定义完了自定义验证类型后，就可以像easyui提供给我们的类型一样去使用了。
注意看equals[‘#pwd‘]传入的是id，而minLength[5]传入的是数值，这个具体的要看内部实现。“validator:function(value, param){}”中param是数组类型。
这里要补充一下，其实easyui本质上是jquery的插件，而我们的自定义类型，就是对jquery插件方法的扩展。更多关于jquery插件的问题，可以查阅其他的资料，当然，以后我也会对其进行总结的。
2.更多的自定义类型
/* * 比较两个日期的大小 * 传入的参数推荐是"yyyy-mm-dd"的格式，其他的日期格式也可以，但要保证一致 */ var dateCompare = function(date1, date2){ if(date1 && date2){ var a = new Date(date1); var b = new Date(date2); return a < b; } } /* * 对easyui-validatebox的验证类型的扩展 */ $.extend($.fn.validatebox.defaults.rules, { //手机号码 mobile: { validator: function(value, param){ return /^0{0,1}1[3,8,5][0-9]{9}$/.test(value); }, message: "手机号码格式不正确" }, //身份证 IDCard: { validator: function(value, param){ return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); }, message: "请输入正确的身份证号码" }, //比较时间选择器 compareDate: { validator: function(value, param){ return dateCompare($(param[0]).datetimebox("getValue"), value); }, message: "结束日期不能小于开始日期" } });
这里也只列举了几个比较常用的自定义类型，未来还会继续对其进行补充。
三.总结
easyui-validatebox是一个比较轻便的验证框架，但它同时又支持对其自定义，所以功能也非常强大。其实在自定义验证类型的过程中，我觉得最重要的反而是正则表达式的知识。
标签：
原文地址：http://www.cnblogs.com/xiayuscc/p/5175258.html
