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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
微信小程序实现图片上传
May 23 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php while循环得到循环次数
2013/10/26 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
什么是python类属性
2020/06/10 Python
python GUI模拟实现计算器
2020/06/22 Python
python把一个字符串切开的实例方法
2020/09/27 Python
python requests库的使用
2021/01/06 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
幼儿园小班教学反思
2014/02/02 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书