首頁 > web前端 > js教程 > 表單驗證插件Validation應用的實例講解_jquery

表單驗證插件Validation應用的實例講解_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 15:37:03
原創
1461 人瀏覽過

jquery.Validation是一款優秀的jquery插件,它能對客戶端表單進行驗證,並且提供了許多可以自訂的屬性和方法,良好的擴充性。現在結合實際情況,我把專案中常要用到的驗證整理成一個實例DEMO,本文就是透過講解這個實例來理解Validation的應用。

本實例涉及的驗證有:
使用者名稱:長度、字元驗證,重複性ajax驗證(是否已存在)。
密碼:長度驗證,重複輸入密碼驗證。
郵件:郵件地址驗證。
固定電話:中國大陸固定電話號碼驗證。
手機號碼:中國大陸手機號碼驗證。
網址:網站URL地址驗證。
日期:標準日期格式驗證。
數字:整數、正整數驗證,數字範圍驗證。
身分證:大陸身分證號碼驗證。
郵遞區號:大陸郵遞區號驗證。
文件:文件類型(後綴)驗證,如只允許上傳圖片。
IP:IP位址驗證。
驗證碼:驗證碼ajax驗證。
使用方法:
1、準備jquery和jquery.validate外掛程式

1

2

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.validate.js"></script>

登入後複製

2、準備CSS樣式
頁面樣式我不再詳述,大家可以自己寫個樣式,也可以參考DEMO的頁面原始碼。這裡要強調的關鍵樣式是要顯示驗證資訊的樣式:

1

2

3

4

label.error{color:#ea5200; margin-left:4px; padding:0px 20px;

background:url(images/unchecked.gif) no-repeat 2px 0 }

label.right{margin-left:4px; padding-left:20px; background:

url(images/checked.gif) no-repeat 2px 0}

登入後複製

3、XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<form id="myform" action="#" method="post">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable">

 <tr class="table_title">

  <td colspan="2">jquery.validation 表单验证</td>

 </tr>

 <tr>

  <td width="22%" align="right">用户名:</td>

  <td><input type="text" name="user" id="user" class="input required" />

  <p>用户名为3-16个字符,可以为数字、字母、下划线以及中文</p></td>

 </tr>

 <tr>

  <td align="right">密码:</td>

  <td><input type="password" name="pass" id="pass" class="input required" />

  <p>最小长度:6 最大长度:16</p>

  </td>

 </tr>

 <tr>

  <td align="right">确认密码:</td>

  <td><input type="password" name="repass" class="input required" /></td>

 </tr>

</table>

</form>

登入後複製

值得一提的是,我在給了標籤一個「required」類別樣式,下文將會提到它的作用。
4.應用Validation外掛程式
呼叫Validation插件的方法:

1

2

3

4

5

6

7

8

9

10

$(function(){   

  var validate = $("#myform").validate({

     rules:{ //定义验证规则

      ......

     },

     messages:{ //定义提示信息

      ......

     }

  })

});

登入後複製

rules:定義驗證規則,key:value的形式,key是要驗證的元素,value可以是字串或物件。例如驗證使用者名稱的長度和不允許為空:

1

2

3

4

5

6

7

8

rules:{

 user:{

   required:true,

   maxlength:16,

   minlength:3

 },

 ......

}

登入後複製

其實我們在XHTML程式碼中可以直接指定input的class屬性為required,作用是不允許為空,這樣在JS部分就不用重複寫了。同樣的驗證email等,直接設定input的class屬性為email。
messages:定義提示訊息,key:value的形式key是要驗證的元素,值是字串或函數,當驗證不通過時提示的資訊。

1

2

3

4

5

6

7

messages:{

 user:{

   required:"用户名不能为空!",

   remote:"该用户名已存在,请换个其他的用户名!"

 },

 ......

}

登入後複製

本例中涉及的驗證JS就是按照上面的規則進行編寫的,Validation插件封裝了很多基本的驗證方式,如下:
required:true 必須有值,不能為空
remote:url 可以用來判斷使用者名稱等是否已經存在,伺服器端輸出true,表示驗證通過
minlength:6 最小長度為6
maxlength:16 最大長度為16
rangelength:長度範圍
range:[10,20] 數值範圍在10-20之間
email:true 驗證郵件
url:true 驗證網址
dateISO:true 驗證日期格式'yyyy-mm-dd'
digits:true 只能為數字
accept:'gif|jpg' 只接受gif或jpg為字尾的圖片。常用於驗證檔案的副檔名
equalTo:'#pass' 與哪個表單欄位的值相等,常用於驗證重複輸入密碼
此外,我還根據專案實際情況擴展了幾個驗證,驗證的程式碼在validate-ex.js,使用前需要先載入這個JS。它能提供以下驗證:
userName:true 使用者名稱只能包含中文、英文字母、數字和底線
isMobile:true 手機號碼驗證
isPhone:true 大陸手機號碼驗證
isZipCode:true 郵遞區號驗證
isIdCardNo:true 大陸身分證號碼驗證
ip:true IP位址驗證
以上提供的驗證方式基本上滿足我們在大多數專案中的需求。如果其他特殊驗證需求,可以擴展,方法如:

1

2

3

4

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

 var zip = /^[0-9]{6}$/;  

 return this.optional(element) || (zip.test(value));  

}, "请正确填写您的邮政编码!");

登入後複製

疑難問題解決:
1、在專案中遇到在驗證使用者名稱是否存在時,發現不支援中文輸入驗證。我的解決方法是給用戶名進行encodeURIComponent編碼,後台PHP再對接受的值進行urldecode解碼

1

2

3

4

5

6

7

8

9

user:{

  remote: {

     url: "chk_user.php", //服务端验证程序

     type: "post", //提交方式

     data: { user: function() {

       return encodeURIComponent($("#user").val()); //编码数据

     }}

  }

},

登入後複製

服務端驗證程式chk_user.php的程式碼:

1

2

3

4

5

6

7

8

9

10

11

<&#63;php

$request = urldecode(trim($_POST['user']));

usleep(150000);

$users = array('月光光', 'jeymii', 'Peter', 'helloweba');

$valid = 'true';

foreach($users as $user) {

  if( strtolower($user) == $request )

    $valid = 'false';

}

echo $valid;

&#63;>

登入後複製

我使用的服务端程序是PHP,您也可以使用ASP,ASP.NET,JAVA等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。

解决办法是在validate({})追加以下代码:

1

2

3

4

5

6

7

8

9

10

errorPlacement: function(error, element) {

  if ( element.is(":radio") )

    error.appendTo ( element.parent() );

  else if ( element.is(":checkbox") )

    error.appendTo ( element.parent() );

  else if ( element.is("input[name=captcha]") )

    error.appendTo ( element.parent() );

  else

    error.insertAfter(element);

}

登入後複製

3、重置表单。Form表单原始的重置方法是reset自带

1

<input type="reset" value="重 置" />

登入後複製

点击“重置”按钮,表单元素将会重置,但是再运行Validation插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢Validation提供了重置表单的方法:resetForm()

1

2

3

$("input:reset").click(function(){

  validate.resetForm();

});

登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
求插件,名字
來自於 1970-01-01 08:00:00
0
0
0
無法載入插件
來自於 1970-01-01 08:00:00
0
0
0
安裝插件不成功
來自於 1970-01-01 08:00:00
0
0
0
vim插件使用問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板