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>

相关推荐