jquery 表单验证框架 (转)
设计完美,可扩展性好,以后就用他了.
http://docs.jquery.com/Plugins/Validation
/**//**
*@authorming
*/
$(document).ready(function(){
/**//*设置默认属性*/
$.validator.setDefaults({
submitHandler:function(form){
form.submit();
}
});
//字符验证
jQuery.validator.addMethod("stringCheck",function(value,element){
returnthis.optional(element)||/^[/u0391-/uFFE5/w]+$/.test(value);
},"只能包括中文字、英文字母、数字和下划线");
//中文字两个字节
jQuery.validator.addMethod("byteRangeLength",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[0]&&length<=param[1]);
},"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
//身份证号码验证
jQuery.validator.addMethod("isIdCardNo",function(value,element){
returnthis.optional(element)||isIdCardNo(value);
},"请正确输入您的身份证号码");
//手机号码验证
jQuery.validator.addMethod("isMobile",function(value,element){
varlength=value.length;
varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;
returnthis.optional(element)||(length==11&&mobile.test(value));
},"请正确填写您的手机号码");
//电话号码验证
jQuery.validator.addMethod("isTel",function(value,element){
vartel=/^/d{3,4}-?/d{7,9}$/;//电话号码格式010-12345678
returnthis.optional(element)||(tel.test(value));
},"请正确填写您的电话号码");
//联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone",function(value,element){
varlength=value.length;
varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$/;
vartel=/^/d{3,4}-?/d{7,9}$/;
returnthis.optional(element)||(tel.test(value)||mobile.test(value));
},"请正确填写您的联系电话");
//邮政编码验证
jQuery.validator.addMethod("isZipCode",function(value,element){
vartel=/^[0-9]{6}$/;
returnthis.optional(element)||(tel.test(value));
},"请正确填写您的邮政编码");
//开始验证
$('#submitForm').validate({
/**//*设置验证规则*/
rules:{
username:{
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/**//*设置错误信息*/
messages:{
username:{
required:"请填写用户名",
stringCheck:"用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength:"用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
email:{
required:"请输入一个Email地址",
email:"请输入一个有效的Email地址"
},
phone:{
required:"请输入您的联系电话",
isPhone:"请输入一个有效的联系电话"
},
address:{
required:"请输入您的联系地址",
stringCheck:"请正确输入您的联系地址",
byteRangeLength:"请详实您的联系地址以便于我们联系您"
}
},
/**//*设置验证触发事件*/
focusInvalid:false,
onkeyup:false,
/**//*设置错误信息提示DOM*/
errorPlacement:function(error,element){
error.appendTo(element.parent());
},
});
});
test.html
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gbk"/>
<title>jQuery验证</title>
<mce:scriptsrc="lib/jquery/jquery-1.3.2.min.js"mce></mce:script>
<mce:scripttype="text/javascript"src="lib/jquery/jquery.validate.js"mce></mce:script>
<mce:scripttype="text/javascript"src="lib/jquery/messages_cn.js"mce></mce:script>
<mce:scripttype="text/javascript"src="lib/jquery/formValidatorClass.js"mce></mce:script>
<mce:styletype="text/css"><!--
*{}{
font-family:Verdana;
font-size:96%;
}
label{}{
width:10em;
float:left;
}
label.error{}{
float:none;
color:red;
padding-left:.5em;
vertical-align:top;
}
p{}{
clear:both;
}
.submit{}{
margin-left:12em;
}
em{}{
font-weight:bold;
padding-right:1em;
vertical-align:top;
}
--></mce:style><styletype="text/css"mce_bogus="1">
*{}{
font-family:Verdana;
font-size:96%;
}
label{}{
width:10em;
float:left;
}
label.error{}{
float:none;
color:red;
padding-left:.5em;
vertical-align:top;
}
p{}{
clear:both;
}
.submit{}{
margin-left:12em;
}
em{}{
font-weight:bold;
padding-right:1em;
vertical-align:top;
}
</style>
</head>
<body>
<formclass="submitForm"id="submitForm"method="get"action="">
<fieldset>
<legend>表单验证</legend>
<p>
<labelfor="username">用户名</label>
<em>*</em><inputid="userName"name="username"size="25"/>
</p>
<p>
<labelfor="email">E-Mail</label>
<em>*</em><inputid="email"name="email"size="25"/>
</p>
<p>
<labelfor="phone">联系电话</label>
<em>*</em><inputid="phone"name="phone"size="25"value=""/>
</p>
<p>
<labelfor="address">地址</label>
<em>*</em><inputid="address"name="address"size="22">
</p>
<inputclass="submit"type="submit"value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>