6.8日音讯,Validation范例及详解

 　　6.8日音讯,Validation范例及详解。Validation在应用中还是非常好用的，目前来看，它的用法也是越来越普及，由于它的语法简单、操作效率高，现在已经延伸到网页制作的各个角落，在此邯郸网站建设首创网络小编给大家说一下，它的用法和实际操作步骤，以供大家学习，查询。

 

　　1/**

　　2*@authorming

　　3*/

　　4$(document).ready(function(){

　　5

　　6/*设置默认属性*/

　　7$.validator.setDefaults({

　　8submitHandler:function(form){

　　9form.submit();

　　10}

　　11});

　　12

　　13//字符验证

　　14jQuery.validator.addMethod(“stringCheck“,function(value,element){

　　15returnthis.optional(element)||/^[u0391-uFFE5w]+$/.test(value);

　　16},“只能包括中文字、英文字母、数字和下划线“);

　　17

　　18//中文字两个字节

　　19jQuery.validator.addMethod(“byteRangeLength“,function(value,element,param){

　　20varlength=value.length;

　　21for(vari=0;i

　　22if(value.charCodeAt(i)>127){

　　23length++;

　　24}

　　25}

　　26returnthis.optional(element)||(length>=param[0]&&length<=param[1]);

　　27},“请确保输入的值在3-15个字节之间(一个中文字算2个字节)“);

　　28

　　29//身份证号码验证

　　30jQuery.validator.addMethod(“isIdCardNo“,function(value,element){

　　31returnthis.optional(element)||isIdCardNo(value);

　　32},“请正确输入您的身份证号码“);

　　33

　　34//手机号码验证

　　35jQuery.validator.addMethod(“isMobile“,function(value,element){

　　36varlength=value.length;

　　37varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;

　　38returnthis.optional(element)||(length==11&&mobile.test(value));

　　39},“请正确填写您的手机号码“);

　　40

　　41//电话号码验证

　　42jQuery.validator.addMethod(“isTel“,function(value,element){

　　43vartel=/^d{3,4}-?d{7,9}$/;//电话号码格式010-12345678

　　44returnthis.optional(element)||(tel.test(value));

　　45},“请正确填写您的电话号码“);

　　46

　　47//联系电话(手机/电话皆可)验证

　　48jQuery.validator.addMethod(“isPhone“,function(value,element){

　　49varlength=value.length;

　　50varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;

　　51vartel=/^d{3,4}-?d{7,9}$/;

　　52returnthis.optional(element)||(tel.test(value)||mobile.test(value));

　　53

　　54},“请正确填写您的联系电话“);

　　55

　　56//邮政编码验证

　　57jQuery.validator.addMethod(“isZipCode“,function(value,element){

　　58vartel=/^[0-9]{6}$/;

　　59returnthis.optional(element)||(tel.test(value));

　　60},“请正确填写您的邮政编码“);

　　61

　　62//开始验证

　　63$(‘#submitForm‘).validate({

　　64/*设置验证规则*/

　　65rules:{

　　66username:{

　　67required:true,

　　68stringCheck:true,

　　69byteRangeLength:[3,15]

　　70},

　　71email:{

　　72required:true,

　　73email:true

　　74},

　　75phone:{

　　76required:true,

　　77isPhone:true

　　78},

　　79address:{

　　80required:true,

　　81stringCheck:true,

　　82byteRangeLength:[3,100]

　　83}

　　84},

　　85

　　86/*设置错误信息*/

　　87messages:{

　　88username:{

　　89required:“请填写用户名“,

　　90stringCheck:“用户名只能包括中文字、英文字母、数字和下划线“,

　　91byteRangeLength:“用户名必须在3-15个字符之间(一个中文字算2个字符)“

　　92},

　　93email:{

　　94required:“请输入一个Email地址“,

　　95email:“请输入一个有效的Email地址“

　　96},

　　97phone:{

　　98required:“请输入您的联系电话“,

　　99isPhone:“请输入一个有效的联系电话“

　　100},

　　101address:{

　　102required:“请输入您的联系地址“,

　　103stringCheck:“请正确输入您的联系地址“,

　　104byteRangeLength:“请详实您的联系地址以便于我们联系您“

　　105}

　　106},

　　107

　　108/*设置验证触发事件*/

　　109focusInvalid:false,

　　110onkeyup:false,

　　111

　　112/*设置错误信息提示DOM*/

　　113errorPlacement:function(error,element){

　　114error.appendTo(element.parent());

　　115},

　　116

　　117});

　　118

　　119});

　　测试页index.html

 

　　7

　　8

　　9

　　10

　　11

　　12

　　13*{

　　14font-family:Verdana;

　　15font-size:96%;

　　16}

　　17label{

　　18width:10em;

　　19float:left;

　　20}

　　21label.error{

　　22float:none;

　　23color:red;

　　24padding-left:.5em;

　　25vertical-align:top;

　　26}

　　27p{

　　28clear:both;

　　29}

　　30.submit{

　　31margin-left:12em;

　　32}

　　33em{

　　34font-weight:bold;

　　35padding-right:1em;

　　36vertical-align:top;

　　37}

　　38

　　39

　　40

　　41

　　42

　　43

　　44

表单验证

　　45

　　46用户名

　　47*

　　48

　　49

　　50E-Mail

　　51*

　　52

　　53

　　54联系电话

　　55*

　　56

　　57

　　58地址

　　59*

　　60

　　61

　　62

　　在实际的用法当中，可能会有各种更好的用法，只要大家不断的实践，勇于创新，把新的知识巩固和学习好，相信新的用法也是在不知不觉中得出来。