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){
-
varm_reg=newRegExp(param[0]);<spanstyle="color:#ff0000;">
-
</span>if(!m_reg.test(value)){
-
$.fn.validatebox.defaults.rules.custom_reg.message=param[1];
-
returnfalse;
-
}
-
else{
-
returntrue;
-
}
-
},
-
message:''
-
}
-
});
使用方式如下:(两个参数,第一个是正则表达式,第二个是错误提示信息)
-
<preclass="html"name="code"><inputid="txt_CustPhone"class="easyui-validateboxtxt-number"<spanstyle="color:#ff0000;">validType="custom_reg['^1\d{10}</span><spanstyle="color:#ff0000;">,'手机号码必须是11位数字!']"missingMessage="请输入客户电话!"</span>style="width:150px"required="true"/></pre>
-
<pre></pre>
-
<p>下面这个是远程效验(<spanstyle="color:#ff0000">这块使用的是同步模式,使用异步会在服务器返回值之前返回校验的结果值);</span></p>
-
<preclass="javascript"name="code">$.extend($.fn.validatebox.defaults.rules,{
-
custom_remote:{
-
validator:function(value,param){
-
varpostdata={};
-
postdata[param[1]]=value;
-
varm_result=$.ajax({type:"POST",
-
url:param[0],
-
data:postdata,
-
dataType:"type",
-
async:false
-
}).responseText;
-
if(m_result=="False"){
-
$.fn.validatebox.defaults.rules.custom_remote.message=param[2];
-
returnfalse;
-
}
-
else{
-
returntrue;
-
}
-
},
-
message:''
-
}</pre>
-
<p></p>
-
<p>用方式如下:(三个参数,第一个是调用的url,第二个是传递给服务器的参数名称,第三个是错误提示信息)</p>
-
<preclass="html"name="code"><inputid="txt_cardid"<spanstyle="color:#ff0000;">class="easyui-validateboxtxt-number"required="true"missingMessage="请输入卡号!"
-
validType="custom_remote['member.ashx?method=check_cardid','cardid','输入的卡号已使用!']"</span>style="width:150px"/></pre>
-
<p>以下是前两个的结合,先用正则表达式本地验证,通过后在发送服务器验证;</p>
-
<preclass="javascript"name="code">$.extend($.fn.validatebox.defaults.rules,{
-
Composite_validation:
-
{
-
validator:function(value,param){
-
varm_reg=newRegExp(param[0]);
-
if(!m_reg.test(value)){
-
$.fn.validatebox.defaults.rules.Composite_validation.message=param[1];
-
returnfalse;
-
}
-
else{
-
varpostdata={};
-
postdata[param[3]]=value;
-
varresult=$.ajax({
-
url:param[2],
-
data:postdata,
-
async:false,
-
type:"post"
-
}).responseText;
-
if(result=="False"){
-
$.fn.validatebox.defaults.rules.Composite_validation.message=param[4];
-
returnfalse;
-
}
-
else{
-
returntrue;
-
}
-
}
-
},
-
message:''
-
}
-
});</pre>
-
<p>用方式如下:(五个参数,第一个是正则表达式,第二个是错误提示信息,第三个是调用的url,第四个是传递给服务器的参数名称,第五个是错误提示信息)</p>
-
<preclass="html"name="code">id="txt_CustIdentity"class="easyui-validateboxtxt-number"style="width:150px"
-
<spanstyle="color:#ff0000;">validType="Composite_validation['^\\d{14}(\\d{1}|\\d{4}|\\d{3}x),'身份证号码为15或18位数字!','member.ashx?method=check_Identityid','Identityid','该身份证号已办卡!']"missingMessage="请输入身份证号码!"</span>required="true"/></pre>
-
<pre></pre>
-
<p><spanstyle="font-size:24px"><strong></strong></span></p>
-
<p><spanstyle="font-size:24px"><strong>备注:本人水平有限,如有错误,欢迎大家拍砖及留言指正</strong></span>
-
</p>
分享到:
相关推荐
主要介绍了jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法的相关资料,需要的朋友可以参考下
主要介绍了jQuery插件EasyUI校验规则,主要介绍validatebox验证框,对validatebox进行校验规则扩展,使用jQuery EasyUI的朋友可以参考下。
自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如: <input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']"> 方法二:(不太好用,试了半天...
jQuery EasyUI 1.0.5增加了validatebox组件的的校验器。 4. jQuery EasyUI 1.0.5改进了dialog组件,目前dialog组件可以从标记中读取collapsible,minimizable,maximizable和 resizable属性 5. jQuery EasyUI 1.0.5...
如何使用easyui远程Ajax校验,怎么获取校验后的返回值
v1.5.2 Build 1 版汉化说明 汉化人:王锦阳 ...• tagbox:添加“required”属性,以允许用户将其用于验证指定值是否为空(译者注:该属性自validatebox继承而来,1.5.2版之前也有该属性只是设置以后无效)。
例如:校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<input type=”text” id=”rate” name=”rate” required=”true” class=”easyui-validatebox” validType=”rateCheck[0,1000]” maxlength=...
Easy UI form表单中的输入验证框和常用控件。如:validatebox增加对time、date、datetime的验证。两次输入密码一致的验证、自定义下拉框等
2、自定义身份属性:图灵机器人平台所提供的ChatBot支持充分的机器人一体化身份属性自定义,开发者通过平台页面对机器人的20多个常见属性进行快捷设置,打造具备个性化身份属性的ChatBot。[2] 3、情感识别引擎:图灵...