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中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
Javascript中With语句用法实例
May 14 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
python写日志封装类实例
2015/06/28 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书