给jquery的validate插件增加自定义方法
2010-08-25 15:58
573 查看
jquery的validate插件的确挺好用,唯一一点不好的就是它自带的验证规则太少了,项目中经常需要用到的 文件后缀判断(例如相片上传的时候),中文字符判断,邮编验证,电话验证,手机号码验证等,都没有,去官网看了看,e文太差,没看明白,搜了搜,实验了一下,还挺好用,所以记下来,备着防止以后用,
验证中的js规则都属于网上收集的,非本人原创,不用找我来要版权什么的,
Java代码
//ip验证
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(/d+)/.(/d+)/.(/d+)/.(/d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "只能输入数字、字母或者它们的组合");
// 自定义验证规则——对电话号码进行验证
$.validator.addMethod("phone",function(value, element){
// “//(?0/d{2,3}[) -]?/d{7,8}/”匹配电话号码的格式多种:010-82839278、(010)82839278、01082839278等,但是,这样有一个问题
// 如:(01082839278这样的也会匹配。当然可以用分支条件"|"解决,比较麻烦。而且以什么开始或结束也没有匹配。
// 为了简单起见,去掉有"()"的形式。匹配区号3位,则本地号8位,区号4位,则本地号7位的号码。
var tel = /^0/d{2}[-]?/d{8}$|^0/d{3}[-]?/d{7}$/;
return this.optional(element) || (tel.test(value));
}, "电话号码格式不对." );
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
//长度为11,以13,15,18开头的
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+/d{8})$/.test(value));
}, "手机号码格式不对");
// 邮政编码验证
jQuery.validator.addMethod("zip", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "邮政编码格式不对");
//图片格式(后缀)
jQuery.validator.addMethod("photo", function(value, element) {
//后缀jpg,gif,bmp,jpeg,允许大小写混合后缀
var fileName =/^(([a-zA-Z]:)|(//))((//)[^///*/?/|/:<>]{1,255})+/.(([j,J][p,P][g,G])|([g,G][i,I][f,F]|([b,B][m,M][p,P])|([j,J][p,P][e,E][g,G])))$/;
return this.optional(element) || (fileName.test(value));
}, "只允许后缀为.jpg,.bmp,.gif,jpeg的文件");
把这个单独写到一个js里,在页面引用就可以用了,例如
Java代码
<td ><input type="file" name="photo" class="{photo:true}"></td>
t;input type="text" name="apply.abroadPhone" value="${(apply.abroadPhone)?if_exists}" class="{phone:true}"/>
如果要使用国际化验证消息则在messages_cn.js里添加对应的国际化信息即可
例如
Java代码
phone:"请填写正确的电话号码",
ip:"asdflkj;lkj",
…………
注意:引用自定义js的时候,如果要让国际化信息生效,则messages_cn.js要在自定义的js之后引入。
验证中的js规则都属于网上收集的,非本人原创,不用找我来要版权什么的,
Java代码
//ip验证
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(/d+)/.(/d+)/.(/d+)/.(/d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "只能输入数字、字母或者它们的组合");
// 自定义验证规则——对电话号码进行验证
$.validator.addMethod("phone",function(value, element){
// “//(?0/d{2,3}[) -]?/d{7,8}/”匹配电话号码的格式多种:010-82839278、(010)82839278、01082839278等,但是,这样有一个问题
// 如:(01082839278这样的也会匹配。当然可以用分支条件"|"解决,比较麻烦。而且以什么开始或结束也没有匹配。
// 为了简单起见,去掉有"()"的形式。匹配区号3位,则本地号8位,区号4位,则本地号7位的号码。
var tel = /^0/d{2}[-]?/d{8}$|^0/d{3}[-]?/d{7}$/;
return this.optional(element) || (tel.test(value));
}, "电话号码格式不对." );
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
//长度为11,以13,15,18开头的
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+/d{8})$/.test(value));
}, "手机号码格式不对");
// 邮政编码验证
jQuery.validator.addMethod("zip", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "邮政编码格式不对");
//图片格式(后缀)
jQuery.validator.addMethod("photo", function(value, element) {
//后缀jpg,gif,bmp,jpeg,允许大小写混合后缀
var fileName =/^(([a-zA-Z]:)|(//))((//)[^///*/?/|/:<>]{1,255})+/.(([j,J][p,P][g,G])|([g,G][i,I][f,F]|([b,B][m,M][p,P])|([j,J][p,P][e,E][g,G])))$/;
return this.optional(element) || (fileName.test(value));
}, "只允许后缀为.jpg,.bmp,.gif,jpeg的文件");
//ip验证 jQuery.validator.addMethod("ip", function(value, element) { return this.optional(element) || (/^(/d+)/.(/d+)/.(/d+)/.(/d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); }, "Please enter a valid ip address."); // 增加只能是字母和数字的验证 jQuery.validator.addMethod("chrnum", function(value, element) { return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value)); }, "只能输入数字、字母或者它们的组合"); // 自定义验证规则——对电话号码进行验证 $.validator.addMethod("phone",function(value, element){ // “//(?0/d{2,3}[) -]?/d{7,8}/”匹配电话号码的格式多种:010-82839278、(010)82839278、01082839278等,但是,这样有一个问题 // 如:(01082839278这样的也会匹配。当然可以用分支条件"|"解决,比较麻烦。而且以什么开始或结束也没有匹配。 // 为了简单起见,去掉有"()"的形式。匹配区号3位,则本地号8位,区号4位,则本地号7位的号码。 var tel = /^0/d{2}[-]?/d{8}$|^0/d{3}[-]?/d{7}$/; return this.optional(element) || (tel.test(value)); }, "电话号码格式不对." ); // 手机号码验证 jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; //长度为11,以13,15,18开头的 return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+/d{8})$/.test(value)); }, "手机号码格式不对"); // 邮政编码验证 jQuery.validator.addMethod("zip", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "邮政编码格式不对"); //图片格式(后缀) jQuery.validator.addMethod("photo", function(value, element) { //后缀jpg,gif,bmp,jpeg,允许大小写混合后缀 var fileName =/^(([a-zA-Z]:)|(//))((//)[^///*/?/|/:<>]{1,255})+/.(([j,J][p,P][g,G])|([g,G][i,I][f,F]|([b,B][m,M][p,P])|([j,J][p,P][e,E][g,G])))$/; return this.optional(element) || (fileName.test(value)); }, "只允许后缀为.jpg,.bmp,.gif,jpeg的文件");
把这个单独写到一个js里,在页面引用就可以用了,例如
Java代码
<td ><input type="file" name="photo" class="{photo:true}"></td>
t;input type="text" name="apply.abroadPhone" value="${(apply.abroadPhone)?if_exists}" class="{phone:true}"/>
<td ><input type="file" name="photo" class="{photo:true}"></td> <input type="text" name="apply.abroadPhone" value="${(apply.abroadPhone)?if_exists}" class="{phone:true}"/>
如果要使用国际化验证消息则在messages_cn.js里添加对应的国际化信息即可
例如
Java代码
phone:"请填写正确的电话号码",
ip:"asdflkj;lkj",
…………
phone:"请填写正确的电话号码", ip:"asdflkj;lkj", …………
注意:引用自定义js的时候,如果要让国际化信息生效,则messages_cn.js要在自定义的js之后引入。
相关文章推荐
- jQuery Validate插件自定义验证规则的方法
- 自定义表单输入验证jquery,validate,增加自己的方法,验证完并保存写入数据库
- JQuery扩展插件Validate 5添加自定义验证方法
- JQuery扩展插件Validate 5添加自定义验证方法
- JQuery扩展插件Validate 5添加自定义验证方法
- Jquery-validate验证插件自定义验证方法
- jquery.validate:追加自定义验证方法
- jquery-validate插件之resetForm方法清除历史错误提示信息
- jQuery validate插件实现ajax验证重复的2种方法
- jquery validate 自定义验证方法介绍 日期验证
- jquery validate 增加过滤特殊字符的方法
- jquery validate 自定义验证方法 日期验证
- jquery validate addMethod 自定义验证方法
- jquery validate 自定义校验方法
- [jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证
- 【转载】[jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证
- jQuery插件Validate实现自定义校验结果样式
- jquery 插件 validate 的常用方法
- jQuery validate插件submitHandler提交导致死循环解决方法
- jquery.validate 自定义验证方法及validate相关参数