jQuery EasyUI---validatebox 校验规则扩展

时间:2022-10-01 07:15:52

EasyUI 的 validatebox 插件, 验证规则相对比较单一也比较少,如下。

rules: {
email:{
validator: function(value){
return ...?$/i.test(value);
},
message: 'Please enter a valid email address.'
},
url: {
validator: function(value){
return ...?$/i.test(value);
},
message: 'Please enter a valid URL.'
},
length: {
validator: function(value, param){
var len = $.trim(value).length;
return len >= param[0] && len <= param[1]
},
message: 'Please enter a value between {0} and {1}.'
},
remote: {
validator: function(value, param){
var data = {};
data[param[1]] = value;
var response = $.ajax({
url:param[0],
dataType:'json',
data:data,
async:false,
cache:false,
type:'post'
}).responseText;
return response == 'true';
},
message: 'Please fix this field.'
}
},

自定义校验规则

对validatebox 进行拓展如:在原有的规则上进行拓展增加下面三个验证规则,单独文件 easyui-extend-textbox.js。

(function($) {
/**
* jQuery EasyUI 1.4 --- 功能扩展
*
* Copyright (c) 2009-2015 RCM
*
* 新增 validatebox 校验规则
*
* 后面可以增加相应的规则
*/
$.extend($.fn.validatebox.defaults.rules, {
idcard: {
validator: function(value, param) {
return /^\d{15}|\d{}18$/.test(value);
},
message: '请输入正确的身份证号码'
},
checkNum: {
validator: function(value, param) {
return /^([0-9]+)$/.test(value);
},
message: '请输入整数'
},
/**
* 1 可以全数字
*2 可以全字母
*3 可以全特殊字符(~!@#$%^&*.)
*4 三种的组合
*5 可以是任意两种的组合
*6 长度6-22
* */
checkPwd: {
validator: function(value, param) {
return /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/.test(value);
},
message: '请输入正确的密码格式'
}, checkFloat: {
validator: function(value, param) {
return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
},
message: '请输入合法数字'
}
});
})(jQuery);

  使用方法:引入拓展的js 这个就不说了。下面在使用中跟官方中的版本使用没什么区别。

<tr>
<td>年龄:</td>
<td>
      <input class="easyui-textbox" data-options="required:true,validType:'checkNum'" name="age" id="age"></input>
    </td>
</tr>