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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python 通配符删除文件的实例
2018/04/24 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python super函数使用方法详解
2020/02/14 Python
Python unittest框架操作实例解析
2020/04/13 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
医学生自荐信
2013/12/03 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
起诉状范本
2015/05/20 职场文书
初中信息技术教学反思
2016/02/16 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Python之基础函数案例详解
2021/08/30 Python