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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对easyui-validatebox的验证类型的扩展相关的知识,希望对你有一定的参考价值。

 

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

以上是关于对easyui-validatebox的验证类型的扩展的主要内容,如果未能解决你的问题,请参考以下文章

JS验证手机号码

easyui自带验证怎样实现textarea验证

EasyUI

jsp和easyui的验证

easyui-textbox 和 easyui-validatebox 设置值和获取值

easyui关于validatebox实现多重规则验证的实践