jquery.validate 自定义验证方法及validate相关参数
JqueryValidate相关参数
//定义中文消息 varcnmsg={ 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);
validate自定义验证
$(document).ready(function(){ /** *身份证号码验证 * */ functionisIdCardNo(num){ varfactorArr=newArray(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); varparityBit=newArray("1","0","X","9","8","7","6","5","4","3","2"); varvarArray=newArray(); varintValue; varlngProduct=0; varintCheckDigit; varintStrLen=num.length; varidNumber=num; //initialize if((intStrLen!=15)&&(intStrLen!=18)){ returnfalse; } //checkandsetvalue for(i=0;i<intStrLen;i++){ varArray[i]=idNumber.charAt(i); if((varArray[i]<'0'||varArray[i]>'9')&&(i!=17)){ returnfalse; }elseif(i<17){ varArray[i]=varArray[i]*factorArr[i]; } } if(intStrLen==18){ //checkdate vardate8=idNumber.substring(6,14); if(isDate8(date8)==false){ returnfalse; } //calculatethesumoftheproducts for(i=0;i<17;i++){ lngProduct=lngProduct+varArray[i]; } //calculatethecheckdigit intCheckDigit=parityBit[lngProduct%11]; //checklastdigit if(varArray[17]!=intCheckDigit){ returnfalse; } } else{//lengthis15 //checkdate vardate6=idNumber.substring(6,12); if(isDate6(date6)==false){ returnfalse; } } returntrue; } /** *判断是否为“YYYYMM”式的时期 * */ functionisDate6(sDate){ if(!/^[0-9]{6}$/.test(sDate)){ returnfalse; } varyear,month,day; year=sDate.substring(0,4); month=sDate.substring(4,6); if(year<1700||year>2500)returnfalse if(month<1||month>12)returnfalse returntrue } /** *判断是否为“YYYYMMDD”式的时期 * */ functionisDate8(sDate){ if(!/^[0-9]{8}$/.test(sDate)){ returnfalse; } varyear,month,day; year=sDate.substring(0,4); month=sDate.substring(4,6); day=sDate.substring(6,8); variaMonthDays=[31,28,31,30,31,30,31,31,30,31,30,31] if(year<1700||year>2500)returnfalse 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])returnfalse returntrue } //身份证号码验证 jQuery.validator.addMethod("idcardno",function(value,element){ returnthis.optional(element)||isIdCardNo(value); },"请正确输入身份证号码"); //字母数字 jQuery.validator.addMethod("alnum",function(value,element){ returnthis.optional(element)||/^[a-zA-Z0-9]+$/.test(value); },"只能包括英文字母和数字"); //邮政编码验证 jQuery.validator.addMethod("zipcode",function(value,element){ vartel=/^[0-9]{6}$/; returnthis.optional(element)||(tel.test(value)); },"请正确填写邮政编码"); //汉字 jQuery.validator.addMethod("chcharacter",function(value,element){ vartel=/^[\u4e00-\u9fa5]+$/; returnthis.optional(element)||(tel.test(value)); },"请输入汉字"); //字符最小长度验证(一个中文字符长度为2) jQuery.validator.addMethod("stringMinLength",function(value,element,param){ varlength=value.length; for(vari=0;i<value.length;i++){ if(value.charCodeAt(i)>127){ length++; } } returnthis.optional(element)||(length>=param); },$.validator.format("长度不能小于{0}!")); //字符最大长度验证(一个中文字符长度为2) jQuery.validator.addMethod("stringMaxLength",function(value,element,param){ varlength=value.length; for(vari=0;i<value.length;i++){ if(value.charCodeAt(i)>127){ length++; } } returnthis.optional(element)||(length<=param); },$.validator.format("长度不能大于{0}!")); //字符验证 jQuery.validator.addMethod("string",function(value,element){ returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value); },"不允许包含特殊符号!"); //手机号码验证 jQuery.validator.addMethod("mobile",function(value,element){ varlength=value.length; returnthis.optional(element)||(length==11&&/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value)); },"手机号码格式错误!"); //电话号码验证 jQuery.validator.addMethod("phone",function(value,element){ vartel=/^(\d{3,4}-?)?\d{7,9}$/g; returnthis.optional(element)||(tel.test(value)); },"电话号码格式错误!"); //邮政编码验证 jQuery.validator.addMethod("zipCode",function(value,element){ vartel=/^[0-9]{6}$/; returnthis.optional(element)||(tel.test(value)); },"邮政编码格式错误!"); //必须以特定字符串开头验证 jQuery.validator.addMethod("begin",function(value,element,param){ varbegin=newRegExp("^"+param); returnthis.optional(element)||(begin.test(value)); },$.validator.format("必须以{0}开头!")); //验证两次输入值是否不相同 jQuery.validator.addMethod("notEqualTo",function(value,element,param){ returnvalue!=$(param).val(); },$.validator.format("两次输入不能相同!")); //验证值不允许与特定值等于 jQuery.validator.addMethod("notEqual",function(value,element,param){ returnvalue!=param; },$.validator.format("输入值不允许为{0}!")); //验证值必须大于特定值(不能等于) jQuery.validator.addMethod("gt",function(value,element,param){ returnvalue>param; },$.validator.format("输入值必须大于{0}!")); //验证值小数位数不能超过两位 jQuery.validator.addMethod("decimal",function(value,element){ vardecimal=/^-?\d+(\.\d{1,2})?$/; returnthis.optional(element)||(decimal.test(value));
jQuery.validate用法
2010年04月12日星期一14:33
名称返回类型描述
validate(options)返回:Validator验证所选的FORM
valid()返回:Boolean检查是否验证通过
rules()返回:Options返回元素的验证规则
rules(add,rules)返回:Options增加验证规则
rules(remove,rules)
jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持。
jquery.validate官方网址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
使用用法:
1、首先下载jquery.js和jquery.validate.js并引入js文件(注意:jquery必须在jquery.validate.js之前被引入,否则会报错)
<scripttype="text/javascript"src="jquery.js"></script> <scripttype="text/javascript"src="jquery.validate.js"></script>
2、编写需要验证的表单代码及编写验证代码(编写验证代码有两种方式,首先使用普通方式)
varvalidator=$("formId").validate({//#formId为需要进行验证的表单ID errorElement:"div",//使用"div"标签标记错误,默认:"label" wrapper:"li",//使用"li"标签再把上边的errorELement包起来 errorClass:"validate-error",//错误提示的css类名"error" onsubmit:true,//是否在提交是验证,默认:true onfocusout:true,//是否在获取焦点时验证,默认:true onkeyup:true,//是否在敲击键盘时验证,默认:true onclick:false,//是否在鼠标点击时验证(一般验证checkbox,radiobox) focusCleanup:false,//当未通过验证的元素获得焦点时,并移除错误提示 rules:{ loginName:{//需要进行验证的输入框name required:true//验证条件:必填 }, loginPassword:{//需要进行验证的输入框name required:true,//验证条件:必填 minlength:5//验证条件:最小长度为5 }, email:{//需要进行验证的输入框name required:true,//验证条件:必填 email:true//验证条件:格式为email } }, messages:{ loginName:{ required:"用户名不允许为空!"//验证未通过的消息 }, loginPassword:{ required:"密码不允许为空!", minlength:jQuery.format("密码至少输入{0}字符!") }, email:{ required:"email不允许为空", email:"邮件地址格式错误!" } }
2、使用metaString方式进行验证,即验证内容与写入class中(注意metaString方式需要引入jquery.metadata.js文件)
<scripttype="text/javascript"src="jquery.js"></script> <scripttype="text/javascript"src="jquery.metadata.js"></script> <scripttype="text/javascript"src="jquery.validate.js"></script> <formid="validate"action="admin/transfer!save.action"method="post"> <inputtype="text"class="required"name="entity.name"/> <inputtype="text"class="email"name="entity.email"/> <inputtype="submit"class="button"value="提交"/> </form> <scripttype="text/javascript"> $(document).ready( function(){ $("#formId").validate({//#formId为需要进行验证的表单ID meta:"validate"//采用metaString方式进行验证(验证内容与写入class中) errorElement:"div",//使用"div"标签标记错误,默认:"label" wrapper:"li",//使用"li"标签再把上边的errorELement包起来 errorClass:"validate-error",//错误提示的css类名"error" onsubmit:true,//是否在提交是验证,默认:true onfocusout:true,//是否在获取焦点时验证,默认:true onkeyup:true,//是否在敲击键盘时验证,默认:true onclick:false,//是否在鼠标点击时验证(一般验证checkbox,radiobox) focusCleanup:false,//当未通过验证的元素获得焦点时,并移除错误提示 }); }) </script>
注意:在Struts2应用中经常用遇到name="entity.name"形式的input表单(即name中包含逗号或其它特殊符号时),我们可以将上述名称以引号("")括起即可,如:
rules:{ "entity.loginName":{//需要进行验证的输入框name required:true//验证条件:必填 } }, messages:{ "entity.loginName":{ required:"用户名不允许为空!"//验证未通过的消息 } }
可给我email:happyczx@126.com欢迎一起探讨有关java技术的问题
以上部分代码来源于payj开源支付系统,这个java开源项目里面有很多优秀的Struts2springhibernatejquery等框架的应用源码,值得一看。在这里先推荐一下,呵呵。。。
ps:JqueryValidate验证规则
(1)required:true必输字段
(2)remote:”check.php”使用ajax方法调用check.php验证输入值
(3)email:true必须输入正确格式的电子邮件
(4)url:true必须输入正确格式的网址
(5)date:true必须输入正确格式的日期
(6)dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22只验证格式,不验证有效性
(7)number:true必须输入合法的数字(负数,小数)
(8)digits:true必须输入整数
(9)creditcard:必须输入合法的信用卡号
(10)equalTo:”#field”输入值必须和#field相同
(11)accept:输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]输入长度必须介于5和10之间的字符串”)(汉字算一个字符)
(15)range:[5,10]输入值必须介于5和10之间
(16)max:5输入值不能大于5
(17)min:10输入值不能小于10
JqueryValidatesubmit提交
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
$(".selector").validate({submitHandler:function(form){$(form).ajaxSubmit();//用JqueryForm的函数}})
JqueryValidateerror错误提示dom
.errorPlacement:CallbackDefault:把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement:function(error,element){ error.appendTo(element.parent()); }
设置错误提示的样式,可以增加图标显示,like:
input.error{border:1pxsolidred;} label.error{ background:url(“./demo/images/unchecked.gif”)no-repeat0px0px; padding-left:16px; padding-bottom:2px; font-weight:bold; color:#EA5200; }