先总结一下jquery.validate.min.js常见使用
1、第一种在将校验控件直接写到标签中
$(function () {$("#appForm").validate();})
<form id="appForm">
<span class="L fs_16 gray">应用名称 </span>
<input name="name" type="text" class="L pop_inpt required" maxlength=30/><!---填写时不能填多余30-->
<span class="L fs_16 gray">应用描述 </span>
<textarea name="note" class="L pop_txt required"></textarea>
</div>
<input type="button" value="确定" />
<input type="button" value="取消" />
</form>
2、第二种是定义在js中
$("#editAppForm").validate({
rules:{
name:{
required:true,
maxlength:20
},
note:{
required:true,
maxlength:200
}
}
});
3、自定义错误提示(radio例子)
html
<p style="padding-left:50px;margin-bottom:96px">
<span class="gray">接口名称</span>
<label style="margin-left:13px">
<input type="radio" class="rado required" value="1" name="type"/>
<span>实时</span>
</label>
<label style="margin-left:10px">
<input type="radio" class="rado required" value="2" name="type"/>
<span>批量</span>
</label>
<label for="type"></label>
</p>
js
var validator = $("#inter_create_form").validate({
rules:{
name:{
required:true,
maxlength:20
}
},
errorPlacement: function(error, element) {
// Append error within linked label
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "name" ) + "']" )
.append( error );
},
errorElement: "span",
});
4、自定义校验规则(可以自己写一个js文件)
jQuery.validator.addMethod(“mobile”, function(value, element){
var length = value.length;
return this.optional(element) || (length == 11&&/^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
}, “手机号码格式错误!”);
是否还有特殊字符
var containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
return ( containSpecial.test(s) ); 判断是否含有
你只看到我在不停的忙碌,却没看到我奋进的热情;
你有你的规则,我有我的选;
你否定我的现在,我决定我的未来;
你嘲笑我只懂编码,不配享受,我可怜你被代码操纵,而不自知;
你可以轻视我的年轻,我会证明这是谁的时代!
Coding是注定痛苦的旅行,路上少不了Bug和Change,但那又怎样?哪怕通宵达旦,也要编的漂亮!
我是程序员,我为自己代言。
--------------------------------------------------------------------------下面是转别人的--validate常用自定义--------------------------------
http://blog.csdn.net/sunhuwh/article/details/24089933
//定义中文消息
var cnmsg = {
required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),
minlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”),
range: jQuery.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.format(“请输入一个最大为 {0} 的值”),
min: jQuery.format(“请输入一个最小为 {0} 的值”)
};
jQuery.extend(jQuery.validator.messages, cnmsg);
Jquery Validate 验证规则
(1)required:true
(2)remote:”check.PHP”
(3)email:true
(4)url:true
(5)date:true
(6)dateISO:true
(7)number:true
(8)digits:true
(9)creditcard:
(10)equalTo:”#field”
(11)accept:
(12)maxlength:5
(13)minlength:10
(14)rangelength:[5,10]
(15)range:[5,10]
(16)max:5
(17)min:10
Jquery Validate 自定义验证规则
addMethod(name,method,message)方法:
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身param
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只
能输一个字母,范围是a-f,写法如下:
$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0]&&value<=params[1]){
return true;
}else{
return false;
}
},”必须是一个字母,且a-f”);
用的时候,比如有个表单字段的id=”username”,则在rules 中写
username:{
af:["a","f"]
}
方法
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
Jquery Validate submit 提交
submitHandler: 通过验证后运行的函数,里面要加上表单提交的函 数,否则表单不会提交
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); //用Jquery Form的函数 } })
Jquery Validate error 错误提示dom
.errorPlacement:Callback Default: 把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
label.error {
background:url(“./demo/images/unchecked.gif”) no-repeat 0px0px;
}
附录:常用的自定义验证规则
//
jQuery.validator.addMethod(“stringCheck”,
return
},
//
jQuery.validator.addMethod(“byteRangeLength”,
var
for(var
if(value.charCodeAt(i)
length++;
}
}
return
},
//
jQuery.validator.addMethod(“isIdCardNo”,
return
},
//
jQuery.validator.addMethod(“isMobile”,
var
var
return
},
//
jQuery.validator.addMethod(“isTel”,
var
return
},
//
jQuery.validator.addMethod(“isPhone”,
var
var
var
return
},
//
jQuery.validator.addMethod(“isZipCode”,
var
return
},
function isIdCardNo(num) {
var factorArr = newArray(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=newArray(“1″,”0″,”X”,”9″,”8″,”7″,”6″,”5″,”4″,”3″,”2″);
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen!= 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < ’0′ || varArray[i]> ’9′) && (i != 17)){
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}
if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {
return false;
}
}
return true;
}
function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500)return false
if (month < 1 || month > 12) returnfalse
return true
}
function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500)return false
if (((year % 4 == 0) && (year % 100!= 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) returnfalse
if (day < 1 || day >iaMonthDays[month - 1]) return false
return true
}
//身份证号码验证
jQuery.validator.addMethod(“idcardno”, function(value, element){
return this.optional(element) || isIdCardNo(value);
}, “请正确输入身份证号码”);
//字母数字
jQuery.validator.addMethod(“alnum”, function(value, element){
return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, “只能包括英文字母和数字”);
jQuery.validator.addMethod(“zipcode”, function(value, element){
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “请正确填写邮政编码”);
jQuery.validator.addMethod(“chcharacter”, function(value, element){
var tel = /^[u4e00-u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, “请输入汉字”);
// 字符最小长度验证(一个中文字符长度为2)
jQuery.validator.addMethod(“stringMinLength”, 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);
}, $.validator.format(“长度不能小于{0}!”));
// 字符最大长度验证(一个中文字符长度为2)
jQuery.validator.addMethod(“stringMaxLength”, 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);
}, $.validator.format(“长度不能大于{0}!”));
// 字符验证
jQuery.validator.addMethod(“string”, function(value, element){
return this.optional(element) ||/^[u0391-uFFE5w]+$/.test(value);
}, “不允许包含特殊符号!”);
// 手机号码验证
jQuery.validator.addMethod(“mobile”, function(value, element){
var length = value.length;
return this.optional(element) || (length == 11&&/^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
}, “手机号码格式错误!”);
// 电话号码验证
jQuery.validator.addMethod(“phone”, function(value, element){
var tel = /^(d{3,4}-?)?d{7,9}$/g;
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));
}, “邮政编码格式错误!”);
// 必须以特定字符串开头验证
jQuery.validator.addMethod(“begin”, function(value, element, param){
var begin = new RegExp(“^” + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format(“必须以 {0} 开头!”));
// 验证两次输入值是否不相同
jQuery.validator.addMethod(“notEqualTo”, function(value, element,param) {
return value != $(param).val();
}, $.validator.format(“两次输入不能相同!”));
//验证值不允许与特定值等于
jQuery.validator.addMethod(“notEqual”, function(value, element,param) {
return value != param;
}, $.validator.format(“输入值不允许为{0}!”));
// 验证值必须大于特定值(不能等于)
jQuery.validator.addMethod(“gt”, function(value, element, param){
return value > param;
}, $.validator.format(“输入值必须大于{0}!”));
//文件名称校验
jQuery.validator.addMethod("fileValid", function(value, element){
var length = value.length;
var reg = new RegExp('^[\\^/:*?"<>|]+$');// 转义 \ 符号也不行
return this.optional(element) || (reg.test(value));
}, "不能输入\/:*?"<>| ");
--------------------------------------------下面是转别人的普通校验----------------------------------------
/判断输入内容是否为空
function IsNull(){
var str = document.getElementById('str').value.trim();
if(str.length==0){
alert('对不起,文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称!
}
}
//判断日期类型是否为YYYY-MM-DD格式的类型
function IsDate(){
var str = document.getElementById('str').value.trim();
if(str.length!=0){
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
var r = str.match(reg);
if(r==null)
alert('对不起,您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!
}
}
//判断日期类型是否为YYYY-MM-DD hh:mm:ss格式的类型
function IsDateTime(){
var str = document.getElementById('str').value.trim();
if(str.length!=0){
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = str.match(reg);
if(r==null)
alert('对不起,您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!
}
}
//判断日期类型是否为hh:mm:ss格式的类型
function IsTime()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^((20|21|22|23|[0-1]\d)\:[0-5][0-9])(\:[0-5][0-9])?$/
if(!reg.test(str)){
alert("对不起,您输入的日期格式不正确!");//请将“日期”改成你需要验证的属性名称!
}
}
}
//判断输入的字符是否为英文字母
function IsLetter()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[a-zA-Z]+$/;
if(!reg.test(str)){
alert("对不起,您输入的英文字母类型格式不正确!");//请将“英文字母类型”改成你需要验证的属性名称!
}
}
}
//判断输入的字符是否为整数
function IsInteger()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[-+]?\d*$/;
if(!reg.test(str)){
alert("对不起,您输入的整数类型格式不正确!");//请将“整数类型”要换成你要验证的那个属性名称!
}
}
}
//判断输入的字符是否为双精度
function IsDouble(val)
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[-\+]?\d+(\.\d+)?$/;
if(!reg.test(str)){
alert("对不起,您输入的双精度类型格式不正确!");//请将“双精度类型”要换成你要验证的那个属性名称!
}
}
}
//判断输入的字符是否为:a-z,A-Z,0-9
function IsString()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[a-zA-Z0-9_]+$/;
if(!reg.test(str)){
alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!
}
}
}
//判断输入的字符是否为中文
function IsChinese()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[\u0391-\uFFE5]+$/;
if(!reg.test(str)){
alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!
}
}
}
//判断输入的EMAIL格式是否正确
function IsEmail()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(!reg.test(str)){
alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!
}
}
}
//判断输入的邮编(只能为六位)是否正确
function IsZIP()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^\d{6}$/;
if(!reg.test(str)){
alert("对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!
}
}
}
//判断输入的数字不大于某个特定的数字
function MaxValue()
{
var val = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[-+]?\d*$/;
if(!reg.test(str)){//判断是否为数字类型
if(val>parseInt('123')) //“123”为自己设定的最大值
{
alert('对不起,您输入的数字超出范围');//请将“数字”改成你要验证的那个属性名称!
}
}
}
}
Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/
Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/
QQ : /^[1-9]\d{4,8}$/
某种特殊金额:/^((\d{1,3}(,\d{3})*)|(\d+))(\.\d{2})?$/ //说明:除“XXX XX,XXX XX,XXX.00”格式外
//为上面提供各个JS验证方法提供.trim()属性
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
调用:
<input type="text" name="str" >
<input type="button" value=" 确定 " onClick=""> //onClick中写自己要调用的JS验证函数
<script language="javascript" type="text/javascript">
var patterms = new Object();
//验证IP
patterms.ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/;
//验证EMAIL
patterms.email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
//验证日期格式2009-07-13
patterms.date = /^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
//验证时间格式16:55:39
patterms.time = new RegExp("^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$");
//验证函数
function verify(str,pat)
{
var thePat;
thePat = patterms[pat];
if(thePat.test(str))
{
return true;
}
else
{
return false;
}
}
//测试
alert(verify("asidycom@163.com","email")+","+verify("192.168.1.1","ip")+
","+verify("16:55:39","time")+","+verify("2009-07-13","date")+","+verify("192.168","ip"));
验证数字:^[0-9]*$
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
验证长度为3的字符:^.{3}$
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
验证用户名或昵称经常用到: ^[\u4e00-\u9fa5A-Za-z0-9-_]*$ 只能中英文,数字,下划线,减号
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$\" 等字符:[^%&',;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码:^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$:--正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?$
由于手机号段的不断更新,以前的正则表达式已经无法满足需求。重新编写这条表达式,号段资料来源依据:http://www.von-line.com/hao.htm
1
2
3
|
var
regex = {
mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
}
|
表达式分析:
“/”代表一个正则表达式。
“^”代表字符串的开始位置,“$”代表字符串的结束位置。
“?”代表匹配前面的字符一个或零个,所以这里0?的意思是手机号码可以以0开头或不以0开头。
接下的部分验证11位的手机号码,先从13开始,因为从130-139都有所以可选区间是[0-9],15开头的号码没有154所以[]里面没有4这个数字,当然也可以写成[0-35-9],下面18和14开的号码同上。
小括号括起来的代表一个子表达式,里面是4个可选分支分别用“|”来区分开来,在正则中“|”的优先级是最低的,这里每个分支匹配的都是3个字符(一个[]只能匹配一个字符,里面是可选的意思),也就是手机号码的前3位数字,那么后面还有8位数字需要匹配,可以是0-9的任意字符,所以是“[0-9]{8}”,{}中的数字代表匹配前面字符的个数。分析完毕。