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

参考资料

http://blog.csdn.net/jumtre/article/details/38510975

http://blog.csdn.net/lybwwp/article/details/9028741/

方法一:

自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如:

<input class="easyui-validatebox" data-options="required:true,validType:[‘email‘,‘length[0,20]‘]">  

 方法二:(不太好用,试了半天还是不显示第二个验证的消息)

对于1.5版本的easyui.min,注释掉以下代码:

然后再添加

$.extend($.fn.validatebox.defaults.rules, {
            multiple : {
                validator : function(value, vtypes) {
                    var returnFlag = true;
                    var opts = $.fn.validatebox.defaults;
                    for (var i = 0; i < vtypes.length; i++) {
                        var methodinfo = /([a-zA-Z_]+)(.*)/.exec(vtypes[i]);
                        var rule = opts.rules[methodinfo[1]];
                        if (value && rule) {
                            var parame = eval(methodinfo[2]);
                            if (!rule["validator"](value, parame)) {
                                returnFlag = false;
                                this.message = rule.message;
                                break;
                            }
                        }
                    }
                    return returnFlag;
                }
            },
            length : {
                validator : function(value, param) {
                    this.message = ‘Please enter a value between {0} and {1}.‘;
                    var len = $.trim(value).length;
                    if (param) {
                        for (var i = 0; i < param.length; i++) {
                            this.message = this.message.replace(new RegExp(
                                            "\\{" + i + "\\}", "g"), param[i]);
                        }
                    }
                    return len >= param[0] && len <= param[1];
                },
                message : ‘Please enter a value between {0} and {1}.‘
            }
        });  

调用方法

<input class="easyui-validatebox" data-options="required:true,validType:‘multiple[\‘email\‘,\‘length[0,20]\‘]‘">  

方法三:(可以实现两种验证的消息)

$.extend($.fn.validatebox.defaults.rules, {
    minLength : {
        validator : function (value, param) {
            var rules = $.fn.validatebox.defaults.rules;
            rules.minLength.message = ‘Please enter at least {0} characters.‘;
            if(!rules.email.validator(value)){
                rules.minLength.message = rules.email.message;
                return false;
            }
            if(!rules.length.validator(value,param)){
                rules.minLength.message = rules.length.message;
                return false;
            }
            return value.length >= param[0];
        },
        message : ‘‘
    }
});  

根据方法三的试验:

$.extend($.fn.validatebox.defaults.rules, {

    //再次输入密码效验(与上一次一样;密码介于6-16位)
    checkpwd: {
        validator: function (value, param) {
            var rules = $.fn.validatebox.defaults.rules;
            rules.checkpwd.message = ‘Please enter at least {0} characters.‘;

            if (!rules.passequals.validator(value,param)) {
                rules.checkpwd.message = rules.passequals.message;
                return false;
            }
            if (!rules.minlength.validator(value)) {
                rules.checkpwd.message = rules.minlength.message;
                return false;
            }
            return value.length >= param[0];
        },
        message: ‘‘
    },
    passequals: {
        validator: function (value, param) {
            return value == $(param[0]).val();
        },
        message: ‘两次密码不一致.‘
    },

    minlength: {
        validator: function (value) {
            var len = $.trim(value).length;
            return len >=6 && len <= 16;
        },
        message: "输入内容长度必须介于6和16之间."
    }
});

调用:(注意pwd两边不能写引号)

<input id="pwd" name="pwd" type="password" class="easyui-validatebox"  />
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="validType:‘checkpwd[pwd]‘" />

附录: 可以参考的验证规则:

 idcard: {// 验证身份证
                validator: function (value) {
                    return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
                },
                message: ‘身份证号码格式不正确‘
            },
 minLength: {
                validator: function (value, param) {
                    return value.length >= param[0];
                },
                message: ‘请输入至少(2)个字符.‘
            },
 length: { validator: function (value, param) {
                var len = $.trim(value).length;
                return len >= param[0] && len <= param[1];
            },
                message: "输入内容长度必须介于{0}和{1}之间."
            },
 phone: {// 验证电话号码
                validator: function (value) {
                    return /^((\d{2,3})|(\d{3}\-))?(0\d{2,3}|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
                },
                message: ‘格式不正确,请使用下面格式:020-88888888‘
            },
mobile: {// 验证手机号码
                validator: function (value) {
                    return /^(13|15|18)\d{9}$/i.test(value);
                },
                message: ‘手机号码格式不正确‘
            },
intOrFloat: {// 验证整数或小数
                validator: function (value) {
                    return /^\d+(\.\d+)?$/i.test(value);
                },
                message: ‘请输入数字,并确保格式正确‘
            },
currency: {// 验证货币
                validator: function (value) {
                    return /^\d+(\.\d+)?$/i.test(value);
                },
                message: ‘货币格式不正确‘
            },
qq: {// 验证QQ,从10000开始
                validator: function (value) {
                    return /^[1-9]\d{4,9}$/i.test(value);
                },
                message: ‘QQ号码格式不正确‘
            },
integer: {// 验证整数 可正负数
                validator: function (value) {
                    //return /^[+]?[1-9]+\d*$/i.test(value);

                    return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
                },
                message: ‘请输入整数‘
            },
 age: {// 验证年龄
                validator: function (value) {
                    return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
                },
                message: ‘年龄必须是0到120之间的整数‘
            },

 chinese: {// 验证中文
                validator: function (value) {
                    return /^[\Α-\¥]+$/i.test(value);
                },
                message: ‘请输入中文‘
            },
english: {// 验证英语
                validator: function (value) {
                    return /^[A-Za-z]+$/i.test(value);
                },
                message: ‘请输入英文‘
            },
unnormal: {// 验证是否包含空格和非法字符
                validator: function (value) {
                    return /.+/i.test(value);
                },
                message: ‘输入值不能为空和包含其他非法字符‘
            },
 username: {// 验证用户名
                validator: function (value) {
                    return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
                },
                message: ‘用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)‘
            },
faxno: {// 验证传真
                validator: function (value) {
                    //            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
                    return /^((\d{2,3})|(\d{3}\-))?(0\d{2,3}|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
                },
                message: ‘传真号码不正确‘
            },
 zip: {// 验证邮政编码
                validator: function (value) {
                    return /^[1-9]\d{5}$/i.test(value);
                },
                message: ‘邮政编码格式不正确‘
            },
ip: {// 验证IP地址
                validator: function (value) {
                    return /d+.d+.d+.d+/i.test(value);
                },
                message: ‘IP地址格式不正确‘
            },
name: {// 验证姓名,可以是中文或英文
                validator: function (value) {
                    return /^[\Α-\¥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
                },
                message: ‘请输入姓名‘
            },
date: {// 验证姓名,可以是中文或英文
                validator: function (value) {
                    //格式yyyy-MM-dd或yyyy-M-d
                    return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
                },
                message: ‘清输入合适的日期格式‘
            },
msn: {
                validator: function (value) {
                    return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
                },
                message: ‘请输入有效的msn账号(例:[email protected](msn/live).com)‘
            },
same: {
                validator: function (value, param) {
                    if ($("#" + param[0]).val() != "" && value != "") {
                        return $("#" + param[0]).val() == value;
                    } else {
                        return true;
                    }
                },
                message: ‘两次输入的密码不一致!‘
            }
      
时间: 2024-10-05 02:16:58

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

validatebox实现多重规则验证

作为Easyui的校验插件没有实现多重校验能力是一种缺憾.比如说,既要限制格式为email,同时要求最长长度为20,我们就要扩展一种规则,而对长度的要求很容易变化,如果变成要求30,我们又得扩张一种规则,所以对于多重验证的需求很必要. 实现思路较为简单,扩展一种新规则:multiple,入参为其它规则,然后遍历每个规则,遇到校验不通过的时候就返回失败,并且返回对应的提示消息.思路比较简单,不过正则表达式技巧的使用还是很漂亮的,个人岁暂时不动正则,不过觉得它很优美,所以我很快就会懂的,哈哈.直接上

Easyui的validatebox验证方法自定义扩展

由于easyui的validatebox本身提供的验证方法较少,故对其进行了自定义扩展. 1.新建一个js文件 —— extendValidateboxRules.js   ,内容如下: /** * auther by Highness * date : xxxx-xx-xx */ // 时间格式规范var regex_dateTime = /\d{4}\-\d{2}\-\d{2} \d{2}\:\d{2}:\d{2}/;//@author ren $.extend($.fn.validateb

easyui的validatebox重写自定义验证规则的几个实例

validatebox已经实现的几个规则: 验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现(easyui API): email:匹配E-Mail的正则表达式规则. url:匹配URL的正则表达式规则. length[0,100]:允许在x到x之间个字符. remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true. 拓展:自定义验证规则 自定义验证规则,需要重写$.fn.validatebox.def

EasyUI 扩展自定义EasyUI校验规则 验证规则(常用的)

例如 校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox"  validType="rateCheck[0,1000]"  maxlength="6" /> $.extend($.f

Jquery easyui的validatebox控件和正则表达式

Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email.是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性.验证可以实现在数据层和业务规则层,但应当在表现层进行前端的"保护",因此,我们通常在UI层为用户提供友好的.可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证.在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证.那现在说的Validatebox是怎么实现验证的呢? 仔细观察j

JQuery EasyUI 动态改变表单项的验证守则

//JQuery EasyUI 动态改变表单项的验证规则 $(document).ready(function(){ $('#FILE_QUALITY').combobox({ onChange:function(newValue,oldValue){ if(newValue == 2){ $('#FRONT_FOR_UNIT').validatebox({ required: false }); } else if(newValue == 0){ $('#FRONT_FOR_UNIT').va

启用和配置Office 365多重身份验证

有朋友问我,Office 365的账户安全性如何?如果别人知道我的账号和密码,那不就随时可以访问我的Office 365.其实Office 365里面有个多重身份验证. 什么是多重身份验证,以及它是如何工作的? 多重身份验证 (MFA) 或双重身份验证 (2FA) 是一种身份验证方法,该方法需要使用多种验证方式,并可为用户登录和交易添加另一道关键保护屏障. 该方法需要使用下列验证方式中的任意两种或更多种来发挥作用: 您知道的信息(通常为密码) 您拥有的东西(不易被复制的受信任设备,如电话) 您的

证明你是你——快速开启Windows Azure多重身份验证

中国版Windows Azure的多重身份验证(Multi-Factor Authentication)功能已经开放.这个功能说白了就是要“证明你是你”.目前可以支持以下几种验证方式: 手机,短信验证和语音回拨验证. 固话,语音回拨验证. 手机应用,目前只支持IOS和Windows Phone. 短信验证是我们最熟悉的一种方式,即:在登陆Windows Azure AD进行身份验证时,会向用户的手机发送一条验证码来验证用户身份:语音回拨验证在国外用的比较多,即:在登陆Windows Azure

输入框规则验证

开发过程中碰到有输入框的页面一般都需要对输入框进行某种规则验证,这里对常见规则验证进行了整理,Js实现网页端输入框规则验证,代码: var verify = (function(){ var verify = { /** * 验证是否未定义或null或空字符串 * @param {Object} str */ _isBlank:function(str){ return str == 'undefined' || String(str) == 'null' || $.trim(str) == '