JQuery扩展插件Validate 5添加自定义验证方法


Posted in Javascript onSeptember 05, 2011

示例如下:

<script type="text/javascript"> 
jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 
function(value, element, params) { //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数) 
var exp = new RegExp(params); //实例化正则对象,参数为传入的正则表达式 
return exp.test(value); //测试是否匹配 
}, 
"格式错误"); //addMethod第3个参数:默认错误信息 
$(function() { 
$("#signupForm").validate( 
{ 
rules: { 
txtPassword1: "required", //密码1必填 
txtPassword2: { //密码2的描述多于1项使用对象类型 
required: true, //必填,这里可以是一个匿名方法 
equalTo: "#txtPassword1", //必须与密码1相等 
rangelength: [5, 10], //长度5-10之间 
regex: "^\\w+$" //使用自定义的验证规则,在上例中新增的部分 
}, 
txtEmail: "email" //电子邮箱必须合法 
}, 
messages: { 
txtPassword1: "您必须填写", 
txtPassword2: { 
required: "您必须填写", 
equalTo: "密码不一致", 
rangelength: "长度必须介于{0} 和 {1} 之间的字符串", 
regex: "密码只能是数字、字母与下划线" 
} 
}, 
debug: false, //如果修改为true则表单不会提交 
submitHandler: function() { 
alert("开始提交了"); 
} 
}); 
}); 
</script>

运行结果:
JQuery扩展插件Validate 5添加自定义验证方法
注意,如果参数有多个可以使用数组,如regex:[1,3,5],方法中可以使用下标访问:params[0]
网友提供的一些扩展验证方法:
// 手机号码验证 
jQuery.validator.addMethod("mobile", function(value, element) { 
var length = value.length; 
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 
return this.optional(element) || (length == 11 && mobile.test(value)); 
}, "手机号码格式错误"); 
// 电话号码验证 
jQuery.validator.addMethod("phone", function(value, element) { 
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; 
return this.optional(element) || (tel.test(value)); 
}, "电话号码格式错误"); 
// 邮政编码验证 
jQuery.validator.addMethod("zipCode", function(value, element) { 
var tel = /^[0-9]{6}$/; 
return this.optional(element) || (tel.test(value)); 
}, "邮政编码格式错误"); 
// QQ号码验证 
jQuery.validator.addMethod("qq", function(value, element) { 
var tel = /^[1-9]\d{4,9}$/; 
return this.optional(element) || (tel.test(value)); 
}, "qq号码格式错误"); 
// IP地址验证 
jQuery.validator.addMethod("ip", function(value, element) { 
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; 
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); 
}, "Ip地址格式错误"); 
// 字母和数字的验证 
jQuery.validator.addMethod("chrnum", function(value, element) { 
var chrnum = /^([a-zA-Z0-9]+)$/; 
return this.optional(element) || (chrnum.test(value)); 
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)"); 
// 中文的验证 
jQuery.validator.addMethod("chinese", function(value, element) { 
var chinese = /^[\u4e00-\u9fa5]+$/; 
return this.optional(element) || (chinese.test(value)); 
}, "只能输入中文"); 
// 下拉框验证 
$.validator.addMethod("selectNone", function(value, element) { 
return value == "请选择"; 
}, "必须选择一项"); 
// 字节长度验证 
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
var length = value.length; 
for (var i = 0; i < value.length; i++) { 
if (value.charCodeAt(i) > 127) { 
length++; 
} 
} 
return this.optional(element) || (length >= param[0] && length <= param[1]); 
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

Validate_20110905.rar
Javascript 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
浅析JS运动
Dec 28 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 #Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 #Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 #Javascript
Javascript变量函数浅析
Sep 02 #Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 #Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 #Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 #Javascript
You might like
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python绘制彩虹图
2019/12/16 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
人事部经理岗位职责
2014/03/07 职场文书
新农村建设汇报材料
2014/08/15 职场文书
第一书记观后感
2015/06/08 职场文书
行政处罚告知书
2015/07/01 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python