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检测客户端不是firefox则提示下载
Apr 07 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
iframe实用操作锦集
Apr 22 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
js对象基础实例分析
Jan 13 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
js实现简单的秒表
Jan 16 Javascript
如何用JavaScipt测网速
May 09 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
模仿OSO的论坛(一)
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php下Memcached入门实例解析
2015/01/05 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python自定义线程池实现方法分析
2018/02/07 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python生成密码字典的方法
2018/07/06 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
python从Oracle读取数据生成图表
2020/10/14 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
DBA的职责都有哪些
2012/05/16 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
公司承诺书格式
2014/05/21 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
python pygame入门教程
2021/06/01 Python