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

本文介绍如何使用 EasyUI 的 ValidateBox 组件进行自定义验证规则设置,包括限制输入框字符长度及验证两次输入密码的一致性。通过 HTML 和 JavaScript 示例展示了具体的实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

validatebox已经实现的几个规则:

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

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

拓展:自定义验证规则

自定义验证规则,需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。

1. 限制输入框中字符最小长度为5:

html代码 :

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

js验证代码:

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

2. 验证输入密码和确认密码是否一致:

html代码:

         <tr>
                <td width="100px" align="right" ><nobr>DRDS链接密码:</nobr></td>
                <td ><input type="password" class="easyui-validatebox" id="password" name="password" 
                  style="width: 200px" required="required" validType="checkpassword"/>
                <span></span>     
                 </td>
                </tr>
                <tr id="wltr">
                <td width="100px" align="right" ><nobr>确认密码:</nobr></td>  
                    <td width="300px">
                        <input type="password" class="easyui-validatebox" id="repassword" name="repassword" required="required"
                         style="width: 200px" validType="equalTo['#password']"/>                    
                    </td>
                    </tr>

js验证代码:

$.extend($.fn.validatebox.defaults.rules, {    
    equalTo: {
    validator:
function (value, param) {
      return $(param[0]).val() == value;
       },
     message: '两次输入密码不匹配' } });

多个验证规则可以并列在一个验证规则里面使用,例如上面两个并列在一起使用的方式如下:

$.extend($.fn.validatebox.defaults.rules, {    
    minLength: {    
        validator: function(value, param){    
            return value.length >= param[0];    
        },    
        message: 'Please enter at least {0} characters.'   
    }    
},
equalTo: {    validator:
function (value, param) {       return $(param[0]).val() == value;        },      message: '两次输入密码不匹配' } });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值