Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证

1.当text发生变化时在校验:

      Easyui validatebox个人感觉还是比较好用的,但是发现他不是只有text改变并离开编辑框的时候才验证,而是不停的做验证;如果是js脚本的本地验证还好,如果是远程验证(如:调用数据库检测信息是否已存在)那就不停的向服务器发送请求,这就比较麻烦啦;通过查看Easyui validatebox的js脚本文件,发现Easyui validatebox尽然是在编辑框获得焦点之后,启用了定时器来不停的做校验的,郁闷!源码如下:

box.unbind(".validatebox").bind("focus.validatebox",function(){
_2e9.validating=true;
(function(){
if(_2e9.validating){
_2ee(_2e8);
setTimeout(arguments.callee,200);
}
})();
})

找到问题,那就修改,将上面的代码替换成下面的代码,保证只在获取焦点并且值为空或者值发生改变时进行校验;

 box.unbind(".validatebox").bind("focus.validatebox", function() {
            if (box.val().length == 0) {
                _2e9.validating = true;
                if (_2e9.validating) {
                    _2ee(_2e8);
                }
            };
        }).bind("change.validatebox", function() {
            _2e9.validating = true;
            if (_2e9.validating) {
                _2ee(_2e8);
            } 
        })

2.取消校验:

       当把包含Easyui validatebox的div转换成dialog显示时,如果本次的校验未通过,然后取消了本次操作,那么本次的校验会保留,如果在打开dialog重新赋空值或正确的值,但是还是显示验证未通过,给用户造成错觉,但是Easyui validatebox并不提供取消校验的方法,查看源码发现可以通过如下方式取消验证不通过的标识(那个红色感叹号和错误消息),为了更好的控制,这条语句的设计是一次取消一个validatebox的验证标识(elemId为validatebox的id

$("#" + elemId).removeClass('validatebox-invalid');

3.扩展自定义验证:

            Easyui validatebox提供了验证方式的扩展,但是如果一次扩展一条的话,没新增有一种就需要该一次js文件,比较麻烦,我做了一个正则表达式效验,这样使用时只需要在相应的Easyui validatebox的aspx页面的定义是加入效验的侦测表达式即可,源码如下:

    $.extend($.fn.validatebox.defaults.rules, {
           custom_reg: {
            validator: function(value, param) {
                var m_reg = new RegExp(param[0]); //传递过来的正则字符串中的"\"必须是"\\"
                if (!m_reg.test(value)) {
                    $.fn.validatebox.defaults.rules.custom_reg.message = param[1];
                    return false;
                }
                else {
                    return true;
                }
            },
            message: ''
        }
       });
使用方式如下:(两个参数,第一个是正则表达式,第二个是错误提示信息)
<input id="txt_CustPhone" class="easyui-validatebox txt-number" validType="custom_reg['^1\d{10},'手机号码必须是11位数字!']" missingMessage="请输入客户电话!" style="width:150px" required="true"/>

下面这个是远程效验(这块使用的是同步模式,使用异步会在服务器返回值之前返回校验的结果值);

$.extend($.fn.validatebox.defaults.rules, {
        custom_remote: {
            validator: function(value, param) {
                var postdata = {};
                postdata[param[1]] = value;
                var m_result =$.ajax({ type: "POST",//http请求方式
                    url: param[0],    //服务器段url地址
                    data:postdata,      //发送给服务器段的数据
                    dataType: "type", //告诉JQuery返回的数据格式
                    async: false
                }).responseText;
                if (m_result == "False") {
                    $.fn.validatebox.defaults.rules.custom_remote.message = param[2];
                    return false;
                }
                else {
                    return true;
                }
            },
            message: ''
        }

 

用方式如下:(三个参数,第一个是调用的url,第二个是传递给服务器的参数名称,第三个是错误提示信息)

<input id="txt_cardid" class="easyui-validatebox txt-number" required="true" missingMessage="请输入卡号!"
 validType="custom_remote['member.ashx?method=check_cardid','cardid','输入的卡号已使用!']" style="width:150px"/>

以下是前两个的结合,先用正则表达式本地验证,通过后在发送服务器验证;

 $.extend($.fn.validatebox.defaults.rules, {
        Composite_validation:
        {
            validator: function(value, param) {
                var m_reg = new RegExp(param[0]); //传递过来的正则字符串中的"\"必须是"\\"
                if (!m_reg.test(value)) {
                    $.fn.validatebox.defaults.rules.Composite_validation.message = param[1];
                    return false;
                }
                else {
                    var postdata = {};
                    postdata[param[3]] = value;
                    var result = $.ajax({
                        url: param[2],
                        data: postdata,
                        async: false,
                        type: "post"
                    }).responseText;
                    if (result == "False") {
                        $.fn.validatebox.defaults.rules.Composite_validation.message = param[4];
                        return false;
                    }
                    else {
                        return true;
                    }
                }
            },
            message: ''
        }
    });

用方式如下:(五个参数,第一个是正则表达式,第二个是错误提示信息,第三个是调用的url,第四个是传递给服务器的参数名称,第五个是错误提示信息)

id="txt_CustIdentity" class="easyui-validatebox txt-number" style="width:150px" 
validType="Composite_validation['^\\d{14}(\\d{1}|\\d{4}|\\d{3}x),'身份证号码为15或18位数字!','member.ashx?method=check_Identityid','Identityid','该身份证号已办卡!']" missingMessage="请输入身份证号码!" required="true" />

 

备注:本人水平有限,如有错误,欢迎大家拍砖及留言指正

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值