对easyui-validatebox的验证类型的扩展

Posted 2020-06-13

 

　　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是一个比较轻便的验证框架，但它同时又支持对其自定义，所以功能也非常强大。其实在自定义验证类型的过程中，我觉得最重要的反而是正则表达式的知识。