6.8日音訊,Validation范例及詳解。Validation在應(yīng)用中還是非常好用的，目前來看，它的用法也是越來越普及，由于它的語法簡單、操作效率高，現(xiàn)在已經(jīng)延伸到網(wǎng)頁制作的各個(gè)角落，在此
邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)小編給大家說一下，它的用法和實(shí)際操作步驟，以供大家學(xué)習(xí)，查詢。
1/**
2*@authorming
3*/
4$(document).ready(function(){
5
6/*設(shè)置默認(rèn)屬性*/
7$.validator.setDefaults({
8submitHandler:function(form){
9form.submit();
10}
11});
12
13//字符驗(yàn)證
14jQuery.validator.addMethod(“stringCheck“,function(value,element){
15returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);
16},“只能包括中文字、英文字母、數(shù)字和下劃線“);
17
18//中文字兩個(gè)字節(jié)
19jQuery.validator.addMethod(“byteRangeLength“,function(value,element,param){
20varlength=value.length;
21for(vari=0;i<value.length;i++){
22if(value.charCodeAt(i)>127){
23length++;
24}
25}
26returnthis.optional(element)||(length>=param[0]&&length<=param[1]);
27},“請(qǐng)確保輸入的值在3-15個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))“);
28
29//身份證號(hào)碼驗(yàn)證
30jQuery.validator.addMethod(“isIdCardNo“,function(value,element){
31returnthis.optional(element)||isIdCardNo(value);
32},“請(qǐng)正確輸入您的身份證號(hào)碼“);
33
34//手機(jī)號(hào)碼驗(yàn)證
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},“請(qǐng)正確填寫您的手機(jī)號(hào)碼“);
40
41//電話號(hào)碼驗(yàn)證
42jQuery.validator.addMethod(“isTel“,function(value,element){
43vartel=/^\d{3,4}-?\d{7,9}$/;//電話號(hào)碼格式010-12345678
44returnthis.optional(element)||(tel.test(value));
45},“請(qǐng)正確填寫您的電話號(hào)碼“);
46
47//聯(lián)系電話(手機(jī)/電話皆可)驗(yàn)證
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},“請(qǐng)正確填寫您的聯(lián)系電話“);
55
56//郵政編碼驗(yàn)證
57jQuery.validator.addMethod(“isZipCode“,function(value,element){
58vartel=/^[0-9]{6}$/;
59returnthis.optional(element)||(tel.test(value));
60},“請(qǐng)正確填寫您的郵政編碼“);
61
62//開始驗(yàn)證
63$(‘#submitForm‘).validate({
64/*設(shè)置驗(yàn)證規(guī)則*/
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/*設(shè)置錯(cuò)誤信息*/
87messages:{
88username:{
89required:“請(qǐng)?zhí)顚懹脩裘?ldquo;,
90stringCheck:“用戶名只能包括中文字、英文字母、數(shù)字和下劃線“,
91byteRangeLength:“用戶名必須在3-15個(gè)字符之間(一個(gè)中文字算2個(gè)字符)“
92},
93email:{
94required:“請(qǐng)輸入一個(gè)Email地址“,
95email:“請(qǐng)輸入一個(gè)有效的Email地址“
96},
97phone:{
98required:“請(qǐng)輸入您的聯(lián)系電話“,
99isPhone:“請(qǐng)輸入一個(gè)有效的聯(lián)系電話“
100},
101address:{
102required:“請(qǐng)輸入您的聯(lián)系地址“,
103stringCheck:“請(qǐng)正確輸入您的聯(lián)系地址“,
104byteRangeLength:“請(qǐng)?jiān)攲?shí)您的聯(lián)系地址以便于我們聯(lián)系您“
105}
106},
107
108/*設(shè)置驗(yàn)證觸發(fā)事件*/
109focusInvalid:false,
110onkeyup:false,
111
112/*設(shè)置錯(cuò)誤信息提示DOM*/
113errorPlacement:function(error,element){
114error.appendTo(element.parent());
115},
116
117});
118
119});
測試頁index.html
7<scriptsrc=”lib/jquery/jquery-1.3.2.min.js”></script>
8<scripttype=”text/javascript”src=”lib/jquery/jquery.validate.js”mce_src=”lib/jquery/jquery.validate.js”></script>
9<scripttype=”text/javascript”src=”lib/jquery/messages_cn.js”></script>
10<scripttype=”text/javascript”src=”lib/jquery/formValidatorClass.js”></script>
11<styletype=”text/css”>
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</style>
40</head>
41<body>
42<formclass=”submitForm”id=”submitForm”method=”get”action=”">
43<fieldset>
44<legend>表單驗(yàn)證</legend>
45<p>
46<labelfor=”username”>用戶名</label>
47<em>*</em><inputid=”userName”name=”username”size=”25″/>
48</p>
49<p>
50<labelfor=”email”>E-Mail</label>
51<em>*</em><inputid=”email”name=”email”size=”25″/>
52</p>
53<p>
54<labelfor=”phone”>聯(lián)系電話</label>
55<em>*</em><inputid=”phone”name=”phone”size=”25″value=”"/>
56</p>
57<p>
58<labelfor=”address”>地址</label>
59<em>*</em><inputid=”address”name=”address”size=”22″>
60</p>
61<inputclass=”submit”type=”submit”value=”提交”/>
62</p>
在實(shí)際的用法當(dāng)中，可能會(huì)有各種更好的用法，只要大家不斷的實(shí)踐，勇于創(chuàng)新，把新的知識(shí)鞏固和學(xué)習(xí)好，相信新的用法也是在不知不覺中得出來。
