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;
}