Jquery.validate.js表單驗證

標籤：

Jquery.validate.js表單驗證

一、用前必備
官方網站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html

官方文檔：http://docs.jquery.com/Plugins/Validation/Methods

 

 

二、引入js檔案

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>

 

三、編寫驗證js

$(function () {     $(document.forms[0]).validate({         rules: {             UserName: { required: true, minlength: 6, maxlength: 12 },             Password: { required: true, minlength: 5, maxlength: 12 }         },         messages: {             "UserName": {                 required: "使用者名稱不可為空.",                 minlength: "最少6位",                 maxlength:"最多12位"             },             "Password": {                 required:"密碼不可為空."             }         }     }); })

 

二、預設校正規則
(1)required:true               必輸欄位
(2)remote:"check.php"          使用ajax方法調用check.php驗證輸入值（下面詳細說明）
(3)email:true                  必須輸入正確格式的電子郵件
(4)url:true                    必須輸入正確格式的網址
(5)date:true                   必須輸入正確格式的日期
(6)dateISO:true                必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true                 必須輸入合法的數字(負數，小數)
(8)digits:true                 必須輸入整數
(9)creditcard:                 必須輸入合法的信用卡號
(10)equalTo:"#field"           輸入值必須和#field相同
(11)accept:                    輸入擁有合法尾碼名的字串（上傳檔案的尾碼）
(12)maxlength:5                輸入長度最多是5的字串(漢字算一個字元)
(13)minlength:10               輸入長度最小是10的字串(漢字算一個字元)
(14)rangelength:[5,10]         輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10]               輸入值必須介於 5 和 10 之間
(16)max:5                      輸入值不能大於5
(17)min:10                     輸入值不能小於10

 

remote：URL
使用ajax方式進行驗證，預設會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用data選項
remote: "check-email.php"
remote: {
    url: "check-email.php",     //幕後處理程式
    type: "post",               //資料發送方式
    dataType: "json",           //接受資料格式    
    data: {                     //要傳遞的資料
        username: function() {
            return $("#username").val();
        }
    }
}

遠程地址只能輸出 "true" 或 "false"，不能有其它輸出

 

三、預設的提示

messages: {
    required:"This field is required.",
    remote:"Please fix this field.",
    email:"Please enter a valid email address.",
    url: "Pleaseenter a valid URL.",
    date:"Please enter a valid date.",
    dateISO:"Please enter a valid date (ISO).",
    dateDE:"Bitte geben Sie ein g眉ltiges Datum ein.",
    number:"Please enter a valid number.",
    numberDE:"Bitte geben Sie eine Nummer ein.",
    digits:"Please enter only digits",
    creditcard:"Please enter a valid credit card number.",
    equalTo:"Please enter the same value again.",
    accept:"Please enter a value with a valid extension.",
    maxlength:$.validator.format("Please enter no more than {0}characters."),
    minlength:$.validator.format("Please enter at least {0} characters."),
    rangelength:$.validator.format("Please enter a value between {0} and {1}characters long."),
    range:$.validator.format("Please enter a value between {0} and{1}."),
    max:$.validator.format("Please enter a value less than or equal to{0}."),
    min:$.validator.format("Please enter a value greater than or equal to{0}.")
}

 

如需要修改提示訊息，可在js代碼中加入：

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} 的字串"),
  range:jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
  max:jQuery.validator.format("請輸入一個最大為{0} 的值"),
  min:jQuery.validator.format("請輸入一個最小為{0} 的值")
});

 

推薦做法，將此檔案放入messages_cn.js中，在頁面中引入
<script src="../js/messages_cn.js"type="text/javascript"></script>

Jquery.validate.js表單驗證