EasyUI-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[‘https://…/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]'”>  
   

属性

事件

方法

声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 嗅谱网
转载请注明：转自《EasyUI-ValidateBox（验证框）》
本文地址：http://www.xiupu.net/archives-2455.html
关注公众号：