easyui关于validatebox实现多重规则验证的实践
参考资料
http://blog.csdn.net/jumtre/article/details/38510975
http://blog.csdn.net/lybwwp/article/details/9028741/
方法一:
自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如:
<input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
方法二:(不太好用,试了半天还是不显示第二个验证的消息)
对于1.5版本的easyui.min,注释掉以下代码:

$.extend($.fn.validatebox.defaults.rules, {
multiple : {
validator : function(value, vtypes) {
var returnFlag = true;
var opts = $.fn.validatebox.defaults;
for (var i = ; i < vtypes.length; i++) {
var methodinfo = /([a-zA-Z_]+)(.*)/.exec(vtypes[i]);
var rule = opts.rules[methodinfo[]];
if (value && rule) {
var parame = eval(methodinfo[]);
if (!rule["validator"](value, parame)) {
returnFlag = false;
this.message = rule.message;
break;
}
}
}
return returnFlag;
}
},
length : {
validator : function(value, param) {
this.message = 'Please enter a value between {0} and {1}.';
var len = $.trim(value).length;
if (param) {
for (var i = ; i < param.length; i++) {
this.message = this.message.replace(new RegExp(
"\\{" + i + "\\}", "g"), param[i]);
}
}
return len >= param[] && len <= param[];
},
message : 'Please enter a value between {0} and {1}.'
}
});
调用方法
<input class="easyui-validatebox" data-options="required:true,validType:'multiple[\'email\',\'length[0,20]\']'">
方法三:(可以实现两种验证的消息)
$.extend($.fn.validatebox.defaults.rules, {
minLength : {
validator : function (value, param) {
var rules = $.fn.validatebox.defaults.rules;
rules.minLength.message = 'Please enter at least {0} characters.';
if(!rules.email.validator(value)){
rules.minLength.message = rules.email.message;
return false;
}
if(!rules.length.validator(value,param)){
rules.minLength.message = rules.length.message;
return false;
}
return value.length >= param[];
},
message : ''
}
});
根据方法三的试验:
$.extend($.fn.validatebox.defaults.rules, { //再次输入密码效验(与上一次一样;密码介于6-16位)
checkpwd: {
validator: function (value, param) {
var rules = $.fn.validatebox.defaults.rules;
rules.checkpwd.message = 'Please enter at least {0} characters.'; if (!rules.passequals.validator(value,param)) {
rules.checkpwd.message = rules.passequals.message;
return false;
}
if (!rules.minlength.validator(value)) {
rules.checkpwd.message = rules.minlength.message;
return false;
}
return value.length >= param[];
},
message: ''
},
passequals: {
validator: function (value, param) {
return value == $(param[]).val();
},
message: '两次密码不一致.'
}, minlength: {
validator: function (value) {
var len = $.trim(value).length;
return len >= && len <= ;
},
message: "输入内容长度必须介于6和16之间."
}
});
调用:(注意pwd两边不能写引号)
<input id="pwd" name="pwd" type="password" class="easyui-validatebox" />
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="validType:'checkpwd[pwd]'" />
附录: 可以参考的验证规则:
idcard: {// 验证身份证
validator: function (value) {
return /^\d{}(\d{}[A-Za-z0-])?$/i.test(value);
},
message: '身份证号码格式不正确'
},
minLength: {
validator: function (value, param) {
return value.length >= param[];
},
message: '请输入至少(2)个字符.'
},
length: { validator: function (value, param) {
var len = $.trim(value).length;
return len >= param[] && len <= param[];
},
message: "输入内容长度必须介于{0}和{1}之间."
},
phone: {// 验证电话号码
validator: function (value) {
return /^((\d{,})|(\d{}\-))?(\d{,}|\d{,}-)?[-]\d{,}(\-\d{,})?$/i.test(value);
},
message: '格式不正确,请使用下面格式:020-88888888'
},
mobile: {// 验证手机号码
validator: function (value) {
return /^(||)\d{}$/i.test(value);
},
message: '手机号码格式不正确'
},
intOrFloat: {// 验证整数或小数
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '请输入数字,并确保格式正确'
},
currency: {// 验证货币
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '货币格式不正确'
},
qq: {// 验证QQ,从10000开始
validator: function (value) {
return /^[-]\d{,}$/i.test(value);
},
message: 'QQ号码格式不正确'
},
integer: {// 验证整数 可正负数
validator: function (value) {
//return /^[+]?[1-9]+\d*$/i.test(value); return /^([+]?[-])|([-]?[-])+\d*$/i.test(value);
},
message: '请输入整数'
},
age: {// 验证年龄
validator: function (value) {
return /^(?:[-][-]?|[][-]|)$/i.test(value);
},
message: '年龄必须是0到120之间的整数'
}, chinese: {// 验证中文
validator: function (value) {
return /^[\Α-\¥]+$/i.test(value);
},
message: '请输入中文'
},
english: {// 验证英语
validator: function (value) {
return /^[A-Za-z]+$/i.test(value);
},
message: '请输入英文'
},
unnormal: {// 验证是否包含空格和非法字符
validator: function (value) {
return /.+/i.test(value);
},
message: '输入值不能为空和包含其他非法字符'
},
username: {// 验证用户名
validator: function (value) {
return /^[a-zA-Z][a-zA-Z0-9_]{,}$/i.test(value);
},
message: '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'
},
faxno: {// 验证传真
validator: function (value) {
// return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
return /^((\d{,})|(\d{}\-))?(\d{,}|\d{,}-)?[-]\d{,}(\-\d{,})?$/i.test(value);
},
message: '传真号码不正确'
},
zip: {// 验证邮政编码
validator: function (value) {
return /^[-]\d{}$/i.test(value);
},
message: '邮政编码格式不正确'
},
ip: {// 验证IP地址
validator: function (value) {
return /d+.d+.d+.d+/i.test(value);
},
message: 'IP地址格式不正确'
},
name: {// 验证姓名,可以是中文或英文
validator: function (value) {
return /^[\Α-\¥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
},
message: '请输入姓名'
},
date: {// 验证姓名,可以是中文或英文
validator: function (value) {
//格式yyyy-MM-dd或yyyy-M-d
return /^(?:(?!)[-]{}([-]?)(?:(?:?[-]|[-])\(?:?[-]|[-]|[-])|(?:?[-]|[-])\(?:|)|(?:?[]|[])\(?:))|(?:[-]{}(?:[]|[][]|[][])|(?:[]|[][]|[][]))([-]?)?\(?:))$/i.test(value);
},
message: '清输入合适的日期格式'
},
msn: {
validator: function (value) {
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
message: '请输入有效的msn账号(例:abc@hotnail(msn/live).com)'
},
same: {
validator: function (value, param) {
if ($("#" + param[]).val() != "" && value != "") {
return $("#" + param[]).val() == value;
} else {
return true;
}
},
message: '两次输入的密码不一致!'
}
easyui关于validatebox实现多重规则验证的实践的更多相关文章
- validatebox实现多重规则验证
作为Easyui的校验插件没有实现多重校验能力是一种缺憾.比如说,既要限制格式为email,同时要求最长长度为20,我们就要扩展一种规则,而对长度的要求很容易变化,如果变成要求30,我们又得扩张一种规 ...
- easyui的validatebox重写自定义验证规则的几个实例
validatebox已经实现的几个规则: 验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现(easyui API): email:匹配E-Mail的正则表达式规则. url:匹配URL ...
- 第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件
jQuery EasyUI,ValidateBox(验证框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 4.自定义验证 本节课重点了解 EasyUI 中 ValidateBox(验证框 ...
- Jquery easyui的validatebox控件和正则表达式
http://blog.csdn.net/dandanzmc/article/details/36421465 仔细观察jquery.validatebox.js文件,会发现它的验证其实还是采用的正则 ...
- JQuery EasyUI 动态改变表单项的验证守则
//JQuery EasyUI 动态改变表单项的验证规则 $(document).ready(function(){ $('#FILE_QUALITY').combobox({ onChange:fu ...
- 仿照easy-ui并改进的表单验证
概述 easy-ui有自身的一套表单验证,扩展方便,但默认下也存在一些弱点,比如多规则验证.后台验证.远程异步验证等,这些功能要解决起来是比较吃力的.我仿照它的样式,写了一套前端表单验证的validB ...
- ASP.NET没有魔法——ASP.NET Identity 的“多重”身份验证
ASP.NET Identity除了提供基于Cookie的身份验证外,还提供了一些高级功能,如多次输入错误账户信息后会锁定用户禁止登录.集成第三方验证.账户的二次验证等,并且ASP.NET MVC的默 ...
- 证明你是你——快速开启Windows Azure多重身份验证
中国版Windows Azure的多重身份验证(Multi-Factor Authentication)功能已经开放.这个功能说白了就是要“证明你是你”.目前可以支持以下几种验证方式: 手机,短信验证 ...
- 宣布正式发布 Windows Azure 多重身份验证
身份和访问管理是安全之锚,是企业 IT 部门的首要任务.它是随时随地向员工.合作伙伴和客户提供访问的关键所在.今天,我们非常高兴地宣布正式发布 Windows Azure 多重身份验证,从而为 IT ...
随机推荐
- MVC第二天
一.过滤器filter 注意:如果继承自接口需要让类实现FilterAttribute,才可以作为特性使用使用方式1:作为Controller或Action的特性使用方式2:在Global中注册为全局 ...
- Flink - NetworkEnvironment
NetworkEnvironment 是一个TaskManager对应一个,而不是一个task对应一个 其中最关键的是networkBufferPool, operator产生的中间结果,Result ...
- 【javaweb学习】XML和约束模式
xml:可扩展标记语言,w3c组织发布的,用于保存有关系的数据,作为配置文件,描述程序模块之间的关系 <?xml version="1.0" encoding="g ...
- js中的 || && !!
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回aa || b : 将a, b转换为Boolean类型, 再执行逻辑或, tru ...
- Angular-ngtable联动全选
之前于Angular第三方插件ngTable的官网demo上看到的例子,但苦于demo中联动全选为选中所有,项目中并不适用,因此做了下小小的修改,修改目的只是为实现其功能,方法不敢苟同,若有更加简便的 ...
- java连接mysql数据库详细步骤解析
java连接mysql数据库详细步骤解析 第一步:下载一个JDBC驱动包,例如我用的是:mysql-connector-java-5.1.17-bin.jar 第二步:导入下载的J ...
- Linux从零单排(一):Google Chrome的安装
刚刚安装了Linux ubuntu16.10系统,先装上我一直习惯用的Google Chrome 安装步骤如下: 1.终端输入 sudo wget https://repo.fdzh.org/chro ...
- Python学习【第七篇】基本数据类型
基本数据类型 数字 2是一个整数的例子. 长整数 不过是大一些的整数. 3.23和52.3E-4是浮点数的例子,E标记表示10的幂.在这里,52.3E-4表示52.3*10-4. (-5+4j)和(2 ...
- iOS:根据日志去定位网络请求发生的错误是由于服务端造成的,还是客户端造成的?
一.介绍 在项目开发中,服务端和客户端的协作尤为重要,而连接它们的最重要的环节之一就是网络请求,对于服务端而言,如果这个环节出现了错误,那么安全性就无从谈起,同时对于客户端而言,如果这个模块出现了错误 ...
- Linux流量监控工具 - iftop
iftop工具简述 今天看到一流量监控工具,觉得不错,就在自家服务器上装了一下,记录一下,留以后之需: 在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态可以使用nets ...