封装jQuery Validate扩展验证方法
Posted 小向光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装jQuery Validate扩展验证方法相关的知识，希望对你有一定的参考价值。
一、封装自定义验证方法-validate-methods.js
/*****************************************************************
jQuery Validate扩展验证方法 (linjq)
*****************************************************************/
$(function()
// 判断整数value是否等于0
jQuery.validator.addMethod("isIntEqZero", function(value, element)
value=parseInt(value);
return this.optional(element) || value==0;
, "整数必须为0");
// 判断整数value是否大于0
jQuery.validator.addMethod("isIntGtZero", function(value, element)
value=parseInt(value);
return this.optional(element) || value>0;
, "整数必须大于0");
// 判断整数value是否大于或等于0
jQuery.validator.addMethod("isIntGteZero", function(value, element)
value=parseInt(value);
return this.optional(element) || value>=0;
, "整数必须大于或等于0");
// 判断整数value是否不等于0
jQuery.validator.addMethod("isIntNEqZero", function(value, element)
value=parseInt(value);
return this.optional(element) || value!=0;
, "整数必须不等于0");
// 判断整数value是否小于0
jQuery.validator.addMethod("isIntLtZero", function(value, element)
value=parseInt(value);
return this.optional(element) || value<0;
, "整数必须小于0");
// 判断整数value是否小于或等于0
jQuery.validator.addMethod("isIntLteZero", function(value, element)
value=parseInt(value);
return this.optional(element) || value<=0;
, "整数必须小于或等于0");
// 判断浮点数value是否等于0
jQuery.validator.addMethod("isFloatEqZero", function(value, element)
value=parseFloat(value);
return this.optional(element) || value==0;
, "浮点数必须为0");
// 判断浮点数value是否大于0
jQuery.validator.addMethod("isFloatGtZero", function(value, element)
value=parseFloat(value);
return this.optional(element) || value>0;
, "浮点数必须大于0");
// 判断浮点数value是否大于或等于0
jQuery.validator.addMethod("isFloatGteZero", function(value, element)
value=parseFloat(value);
return this.optional(element) || value>=0;
, "浮点数必须大于或等于0");
// 判断浮点数value是否不等于0
jQuery.validator.addMethod("isFloatNEqZero", function(value, element)
value=parseFloat(value);
return this.optional(element) || value!=0;
, "浮点数必须不等于0");
// 判断浮点数value是否小于0
jQuery.validator.addMethod("isFloatLtZero", function(value, element)
value=parseFloat(value);
return this.optional(element) || value<0;
, "浮点数必须小于0");
// 判断浮点数value是否小于或等于0
jQuery.validator.addMethod("isFloatLteZero", function(value, element)
value=parseFloat(value);
return this.optional(element) || value<=0;
, "浮点数必须小于或等于0");
// 判断浮点型
jQuery.validator.addMethod("isFloat", function(value, element)
return this.optional(element) || /^[-\\+]?\\d+(\\.\\d+)?$/.test(value);
, "只能包含数字、小数点等字符");
// 匹配integer
jQuery.validator.addMethod("isInteger", function(value, element)
return this.optional(element) || (/^[-\\+]?\\d+$/.test(value) && parseInt(value)>=0);
, "匹配integer");
// 判断数值类型，包括整数和浮点数
jQuery.validator.addMethod("isNumber", function(value, element)
return this.optional(element) || /^[-\\+]?\\d+$/.test(value) || /^[-\\+]?\\d+(\\.\\d+)?$/.test(value);
, "匹配数值类型，包括整数和浮点数");
// 只能输入[0-9]数字
jQuery.validator.addMethod("isDigits", function(value, element)
return this.optional(element) || /^\\d+$/.test(value);
, "只能输入0-9数字");
// 判断中文字符
jQuery.validator.addMethod("isChinese", function(value, element)
return this.optional(element) || /^[\\u0391-\\uFFE5]+$/.test(value);
, "只能包含中文字符。");
// 判断英文字符
jQuery.validator.addMethod("isEnglish", function(value, element)
return this.optional(element) || /^[A-Za-z]+$/.test(value);
, "只能包含英文字符。");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element)
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]1)|(15[0-9]1)|(18[0-9]1))+\\d8)$/.test(value));
, "请正确填写您的手机号码。");
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element)
var tel = /^(\\d3,4-?)?\\d7,9$/g;
return this.optional(element) || (tel.test(value));
, "请正确填写您的电话号码。");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isTel", function(value,element)
var length = value.length;
var mobile = /^(((13[0-9]1)|(15[0-9]1)|(18[0-9]1))+\\d8)$/;
var tel = /^(\\d3,4-?)?\\d7,9$/g;
return this.optional(element) || tel.test(value) || (length==11 && mobile.test(value));
, "请正确填写您的联系方式");
// 匹配qq
jQuery.validator.addMethod("isQq", function(value, element)
return this.optional(element) || /^[1-9]\\d4,12$/;
, "匹配QQ");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element)
var zip = /^[0-9]6$/;
return this.optional(element) || (zip.test(value));
, "请正确填写您的邮政编码。");
// 匹配密码，以字母开头，长度在6-12之间，只能包含字符、数字和下划线。
jQuery.validator.addMethod("isPwd", function(value, element)
return this.optional(element) || /^[a-zA-Z]\\\\w6,12$/.test(value);
, "以字母开头，长度在6-12之间，只能包含字符、数字和下划线。");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element)
//var idCard = /^(\\d6)()?(\\d4)(\\d2)(\\d2)(\\d3)(\\w)$/;
return this.optional(element) || isIdCardNo(value);
, "请输入正确的身份证号码。");
// IP地址验证
jQuery.validator.addMethod("ip", function(value, element)
return this.optional(element) || /^(([1-9]|([1-9]\\d)|(1\\d\\d)|(2([0-4]\\d|5[0-5])))\\.)(([1-9]|([1-9]\\d)|(1\\d\\d)|(2([0-4]\\d|5[0-5])))\\.)2([1-9]|([1-9]\\d)|(1\\d\\d)|(2([0-4]\\d|5[0-5])))$/.test(value);
, "请填写正确的IP地址。");
// 字符验证，只能包含中文、英文、数字、下划线等字符。
jQuery.validator.addMethod("stringCheck", function(value, element)
return this.optional(element) || /^[a-zA-Z0-9\\u4e00-\\u9fa5-_]+$/.test(value);
, "只能包含中文、英文、数字、下划线等字符");
// 匹配english
jQuery.validator.addMethod("isEnglish", function(value, element)
return this.optional(element) || /^[A-Za-z]+$/.test(value);
, "匹配english");
// 匹配汉字
jQuery.validator.addMethod("isChinese", function(value, element)
return this.optional(element) || /^[\\u4e00-\\u9fa5]+$/.test(value);
, "匹配汉字");
// 匹配中文(包括汉字和字符)
jQuery.validator.addMethod("isChineseChar", function(value, element)
return this.optional(element) || /^[\\u0391-\\uFFE5]+$/.test(value);
, "匹配中文(包括汉字和字符) ");
// 判断是否为合法字符(a-zA-Z0-9-_)
jQuery.validator.addMethod("isRightfulString", function(value, element)
return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);
, "判断是否为合法字符(a-zA-Z0-9-_)");
// 判断是否包含中英文特殊字符，除英文"-_"字符外
jQuery.validator.addMethod("isContainsSpecialChar", function(value, element)
var reg = RegExp(/[(\\ )(\\`)(\\~)(\\!)(\\@)(\\#)(\\$)(\\%)(\\^)(\\&)(\\*)(\\()(\\))(\\+)(\\=)(\\|)(\\)(\\)(\\')(\\:)(\\;)(\\')(',)(\\[)(\\])(\\.)(\\<)(\\>)(\\/)(\\?)(\\~)(\\！)(\\@)(\\#)(\\￥)(\\%)(\\…)(\\&)(\\*)(\\（)(\\）)(\\—)(\\+)(\\|)(\\)(\\)(\\【)(\\】)(\\‘)(\\；)(\\：)(\\”)(\\“)(\\’)(\\。)(\\，)(\\、)(\\？)]+/);
return this.optional(element) || !reg.test(value);
, "含有中英文特殊字符");
//身份证号码的验证规则
function isIdCardNo(num)
//if (isNaN(num)) alert("输入的不是数字！"); return false;
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(\\d6)()?(\\d2)(\\d2)(\\d2)(\\d2)(\\w)$/);
else if (len == 18)
re = new RegExp(/^(\\d6)()?(\\d4)(\\d2)(\\d2)(\\d3)(\\w)$/);
else
//alert("输入的数字位数不对。");
return false;
var a = num.match(re);
if (a != null)
if (len==15)
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
else
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
if (!B)
//alert("输入的身份证号 "+ a[0] +" 里出生日期不对。");
return false;
if(!re.test(num))
//alert("身份证最后一位只能是数字和字母。");
return false;
return true;
);
//车牌号校验
function isPlateNo(plateNo)
var re = /^[\\u4e00-\\u9fa5]1[A-Z]1[A-Z_0-9]5$/;
if(re.test(plateNo))
return true;
return false;
二、测试
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Validate扩展验证方法</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/validate-methods.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script>
<script type="text/javascript">
$(function()
var validate = $("#myform").validate(
debug: true, //调试模式取消submit的默认提交功能
submitHandler: function(form) //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
form.submit(); //提交表单
,
rules:
zero:
//isIntEqZero:true
//isFloat:true
//isInteger:true
//isNumber:true
//isMobile:true
//isPhone:true
//isTel:true
//isIdCardNo:true
//isRightfulString:true
isContainsSpecialChar:true
,
//如果验证控件没有message，将调用默认的信息
messages:
zero:
//isIntEqZero:"请输入0"
//isFloat:"请输入浮点数"
//isInteger:"请输入整数"
);
);
</script>
</head>
<body>
<form id="myform" method="post" action="">
<p>
<label for="zero">输入框：</label>
<!-- id和name最好同时写上 -->
<input id="zero" name="zero" />
</p>
<p>
<input class="submit" type="submit" value="验证" />
</p>
</form>
</body>
</html>
以上是关于封装jQuery Validate扩展验证方法的主要内容，如果未能解决你的问题，请参考以下文章