欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » JQuery EasyUI 1.3.6官方API文档中文版 » 正文

ValidateBox(验证框)

创建时间:2014年08月30日 09:05  阅读次数:(9108)
分享到:

ValidateBox(验证框)

使用$.fn.validatebox.defaults重写默认值对象。

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

依赖关系

  • tooltip

 

用法

通过标签创建验证框。

  1. <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />  

使用Javascript创建验证框。

  1. <input id="vv" />  
  1. $('#vv').validatebox({   
  2.     required: true,   
  3.     validType: 'email'  
  4. });  

检查密码和确认密码是否相同。

  1. // extend the 'equals' rule   
  2. $.extend($.fn.validatebox.defaults.rules, {   
  3.     equals: {   
  4.         validator: function(value,param){   
  5.             return value == $(param[0]).val();   
  6.         },   
  7.         message: 'Field do not match.'  
  8.     }   
  9. });  
  1. <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />  
  2. <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"    
  3.     required="required" validType="equals['#pwd']" />  

 

验证规则

验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现:

  • email:匹配E-Mail的正则表达式规则。
  • url:匹配URL的正则表达式规则。
  • length[0,100]:允许在x到x之间个字符。
  • remote['http://.../action.do','paramName']:发送ajax请求需要验证的值,当成功时返回true。

自定义验证规则,需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。例如,定义一个最小长度(minLength)的自定义验证:

  1. $.extend($.fn.validatebox.defaults.rules, {   
  2.     minLength: {   
  3.         validator: function(value, param){   
  4.             return value.length >= param[0];   
  5.         },   
  6.         message: 'Please enter at least {0} characters.'  
  7.     }   
  8. });  

现在你可以在输入框中限制最小长度为5的自定义最小长度验证了:

  1. <input class="easyui-validatebox" data-options="validType:'minLength[5]'">  

 

属性

属性名 属性值类型 描述 默认值
required boolean 定义为必填字段。 false
validType string,array 定义字段验证类型,比如:email, url等等。可用值有:
1).一个有效类型字符串运用一个验证规则。
2).一个有效类型数组运用多个验证规则。(多验证规则验证一个字段在1.3.2或更高版本中才可以使用)

代码示例:

<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
	required:true,
	validType:['email','length[0,20]']
">
null
delay number 延迟到最后验证输入值。(该属性自1.3.2版开始可用) 200
missingMessage string 当文本框未填写时出现的提示信息。 This field is required.
invalidMessage string 当文本框的内容被验证为无效时出现的提示。 null
tipPosition string 定义当文本框内容无效的时候提示消息显示的位置,有效的值有:'left','right'。(该属性自1.3.2版开始可用) right
deltaX number 提示框在水平方向上位移。(该属性自1.3.3版开始可用) 0
novalidate boolean 为true时关闭验证功能。(该属性自1.3.4版开始可用) false

 

方法

方法名 方法属性 描述
destroy none 移除并销毁组件。
validate none 验证文本框的内容是否有效。
isValid none 调用validate方法并且返回验证结果,true或者false。
enableValidation none 启用验证。(该方法自1.3.4版开始可用)
disableValidation none 禁用验证。(该方法自1.3.4版开始可用)

来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论2条
  • #1楼  评论人:2312418853@qq.com  评论时间:2016-8-29 16:32:06
  • 我是用easyui 弹出对话框的形式操作html页面 如何根据验证框状态控制对话框的结束?
  • #2楼  评论人:2312418853@qq.com  评论时间:2016-8-29 16:32:06
  • 我是用easyui 弹出对话框的形式操作html页面 如何根据验证框状态控制对话框的结束?
发表评论:
留言人:
内  容:
请输入问题 71+10=? 的结果(结果是:81)
结  果: