Jquery.validate表單驗證

時間 2019-11-11

標籤 jquery.validate jquery validate 表單驗證欄目 JQuery 简体版

原文原文鏈接

 1 <html>
 2     
 3     <head>
 4         <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
 5         <script src="jquery.validate.js" type="text/javascript"></script>
 6     </head>
 7     
 8     <body>
 9     
10         <form id="demo_form" action="#">
11             <table style="border:1px red solid">
12                 <tr style="border:1px red solid">
13                     <td  style="border:1px red solid">
14                         姓名
15                     </td>
16                     <td  style="border:1px red solid">
17                         <input type="text" name="username" >
18                     </td>
19                     <td  style="border:1px red solid">
20                         <span></span>
21                     </td>
22                 </tr>
23                 <tr style="border:1px red soild">
24                     <td  style="border:1px red solid">
25                         年齡
26                     </td>
27                     <td  style="border:1px red solid">
28                         <input type="text" name="age" >
29                     </td>
30                     <td  style="border:1px red solid">
31                         <span></span>
32                     </td>
33                 </tr>
34                 <tr style="border:1px red solid">
35                     <td  style="border:1px red solid" colspan="2">
36                         <input type="button" name="submit_btn" value="提交" >
37                     </td>
38                 </tr>
39             </table>
40         <form>
41         
42     </body>
43     
44     <script>
45     
46         //定義驗證規則
47         $("#demo_form").validate({
48             focusCleanup:true,
49             onkeyup:false, 
50             errorPlacement: function(error, element) {  
51                 //showErrorMesssgeDiv(error,element);
52                 $(element).parent('td').next('td').children('span').html(error[0]);
53             },   
54             rules:{
55                username:{
56                    required:true,
57                    minlength:3,
58                    maxlength:10
59                 },
60                 age:{
61                     required:true,
62                     digits:true
63                 }
64             },
65             messages:{
66                 username:{
67                    required:"用戶名必須填",
68                    minlength:"用戶名不能少於3個字符",
69                    maxlength:"用戶名不能大於10個字符"
70                 },
71                 age:{
72                     required:"年齡必須填",
73                     digits:"年齡必須爲數字"
74                 }
75             }
76         });
77         
78         $("input[name='submit_btn']").unbind("click").bind("click",function(){
79             if ( $("#demo_form").valid() )
80             {
81                 alert("驗證經過！！");
82             }
83         });
84         
85         
86     </script>
87     
88 </html>

Jquery.validate 一些屬性配置：javascript

required:true php	必填字段css
remote:"check.php" html	使用ajax方法調用check.php驗證輸入值java
email:true jquery	必須輸入正確格式的電子郵件git
url:true ajax	必須輸入正確格式的網址緩存
date:true ui	必須輸入正確格式的日期
dateISO:true	必須輸入正確格式的日期(ISO)，例如：2010-01-01，2010/01/01 只驗證格式，不驗證有效性
number:true	必須輸入合法的數字(負數，小數)
digits:true	必須輸入整數
creditcard:	必須輸入合法的信用卡號
equalTo:"#field"	輸入值必須和$(「#field」)相同
accept: "gif\|png\|jpg"	輸入擁有合法後綴名的字符串（上傳文件的後綴），多個後綴之間用’\|’隔開
maxlength:5	輸入長度最可能是5的字符串(漢字算一個字符)
minlength:3	輸入長度最小是3的字符串(漢字算一個字符)
rangelength:[5,10]	輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
range:[5,10]	輸入值必須介於 5 和 10 之間
max:5	輸入值不能大於5
min:10	輸入值不能小於10

說明：

　　remote是遠程驗證：好比註冊驗證用戶名是否已被註冊，返回值只能是true（驗證成功）或false（驗證失敗）。在訪問指定的url時，會自動把當前字段的值作爲參數（以字段name爲key）傳遞過去。

某些屬性值中的引號不能省略，不然出錯。如accept、equalTo等。

　　remote使用時遇到的問題：添加用戶時須要驗證用戶名是否存在，當添加上一個用戶後，在不離開該頁面的狀況下，再次添加該用戶名的用戶，validate不能提示該用戶已存在，由於緩存的緣由，jquery仍認爲該用戶名可用。解決方法是在頁面中添加：

$().ready(function(){

　　$.ajaxSetup ({

　　　　cache: false //關閉AJAX相應的緩存

　　}); // 關閉緩存功能

});

自定義驗證規則

　　除了內置的驗證規則，validation還容許自定義驗證規則。這是經過validation的addMethod()方法實現的，語法爲：　　

　　　　jQuery.validator.addMethod("name",function,message)

　　其中:

　　　　name　　　　爲驗證規則的名稱

　　　　function　　定義驗證的規則。參數有?。返回值爲?。

　　　　message　　是驗證失敗時的提示信息。

//更改默認的提示內容
jQuery.extend(jQuery.validator.messages, {
    required: "必填字段",
    remote: "請指定一個不重複的值",
    email: "請輸入正確格式的電子郵件",
    url: "請輸入合法的網址",
    date: "請輸入合法的日期",
    dateISO: "請輸入合法的日期 (ISO).",
    number: "請輸入合法的數字",
    digits: "只能輸入整數",
    creditcard: "請輸入合法的信用卡號",
    equalTo: "請再次輸入相同的值",
    accept: "請輸入擁有合法後綴名的字符串",
    maxlength: jQuery.validator.format("容許的最大長度爲 {0} 個字符"),
    minlength: jQuery.validator.format("容許的最小長度爲 {0} 個字符"),
    rangelength: jQuery.validator.format("容許的長度爲{0}和{1}之間"),
    range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"),
    max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),
    min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")
});