jQuery.Validate驗證庫的使用介紹_jquery

jQuery.Validate驗證庫
1、下載jquery.validate，這裡我提供jquery-validation-1.9.0，點擊下載

預設校驗規則

複製代碼 代碼如下:

代碼如下:
(1)required:true                      必須輸入正確格式的電子郵件
(4)url:true                    必須輸入正確格式的網址
(5)date:true  dateISO:true                必須輸入正確格式的日期(ISO)，例如： 2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true                      必須輸入整數
(9)creditcard:                 必須輸入合法的信用卡號碼
(10)equalTo:"#field"   .               輸入擁有合法後綴名的字串（上傳文件的字尾）
(12)maxlength:5                輸入長度最多為5的字串(漢字算   漢字算一個字符)
(14)rangelength:[5,10]         輸入長度必須介於5 和10 之間的字串")(漢字算字)
(15)range: 必須介於5 與10 之間
(16)max:5                      輸入值  輸入值不能小於10


預設的提示

複製程式碼

程式碼如下:messages: {    ",      remote: "Please fix this field.",      email: "Please enter a valid email address.",      dateISO: "Please enter a valid date (ISO).", 

    dateDE: "Bitte geben ). enter a valid number.", 
    numberDE: "Bitte geben Sie eine Nummer ein.", 
    digits: "Please enter only digits",  🎜>
    equalTo: "Please enter the same value again.", 
    accept: "Please enter a value with a valid extension.", 
 )o. name. 0} characters."), 
    minlength: $.validator.format("Please enter at least {0} characters."), 
    rangelength: $.validator.format(Pvalue. } and {1} characters long."), 
    range: $.validator.format("Please enter a value between {0} and {1}."), 
 "Please enter a value less than or equal to {0}."), 
    min: $.validator.format("Please enter a value greater than or equal to {0}.") 
,,

如需要修改，將以下js程式碼儲存為：messages_cn.js，並在頁面中引用：

複製程式碼

程式碼如下:

複製程式碼

程式碼如下:

jQuery.extend(jQuery.validator.messages, {
jQuery.extend(jQuery.validator.messages, {
必須選取欄位",
  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} 的值")

});


使用方式

1、將校驗規則寫到控制項 複製程式碼

程式碼如下:

<script><BR>$().ready(function() {<BR>  $("#signupForm").validate({meta: "validate"});<BR>});<BR> </script>

   

        Firstname  firstname" name="firstname" class="{validate:{required:true,minlength:5,messages:{required:'請輸入內容',minlength:'字串長度不能小於5'}}}" />
 

  E-Mail
 
 

 

  Password
 
 

 

  確認密碼
 
 

   

       
   


注意：

規則部分應用完整形式，如下：

正確寫法：

複製程式碼 程式碼如下:

錯誤寫法：

複製程式碼 程式碼如下:

再有一種方式

複製程式碼 代碼如下:$.metadata.setType("attr", "validate");

這樣可以使用validate="{required:true}"的方式，或是class="required"，但class ="{required:true,minlength:5}"將不起作用 

例如，將上述範例程式碼改為：

複製程式碼

程式碼如下:

;

<script><BR>$().ready(function() {<BR>  $.metadata.setType("attr", "validate");<BR>  $("#signupForm").validate ( );<BR>});<BR></腳本></script>

   

        名字

 

  電子郵件標籤>
 
 

 

  密碼
 
 

 

  確認密碼
 
 

   

       

注意：規則部分應用完整形式，即

正確寫法：

複製程式碼程式碼如下：

程式碼如下：

錯誤寫法：

複製程式碼

代碼如下：

2、將校驗規則寫入程式碼中

複製程式碼程式碼如下：

$().ready(function() {
  $("#signupForm").validate({
    規則:
    {
     ：true，
        電子郵件：true
      }，
     密碼：
    最小長度：5
      },
      確認密碼:
      {
        必要：true，
        最少長度：5，
       訊息：
    {
      名字: "請輸入姓名",
      email:
      {
        required: "請輸入Email地址",
      密碼:
      {
        required: "請輸入密碼",
        minlength: jQuery.format("密碼不能小於{0}個字元     {
        required: "請輸入確認密碼",
        minlength: "確認密碼不能小於5個字元",
        equalTo: "註解>});
//messages處，如果某個控制項沒有訊息，將呼叫預設的資訊

   

        名字標籤>
        電子郵件
 
 

 

  密碼
 
 

 

  確認密碼
 
 

 p>
       
   

必填："#aa:checked"id名稱為aa的dom被選中時，則需要驗證

required:function(){} 傳回為真，表示需要驗證（僅針對required有效，其他無效。）

後邊同樣常用於，表單中需要同時填入或不填的元素


以下針對上面三項內容，透過實例來說明一下，比較容易理解。 （第一個說明：required:true 必須有值，剛才就不舉例了，透過上面的例子，已經很清楚了。）

required:"#aa:checked" 的範例如下：




複製程式碼

程式碼如下：

$().ready(function() {
  $("#signupForm").validate({
    規則:
    {
     填: "# open:checked",
        電子郵件: true
      }
    },
   , {
        必要填寫："請輸入電子郵件地址",
        電子郵件："請輸入正確的電子郵件地址"
   
//messages處，如果某個控制項沒有訊息，將呼叫預設的資訊

        開關：
       
 
        關閉
   

  >      電子郵件
     
     class="submit" type="submit" value="提交"/>
    > ;

選舉中「開啟」時，則對電子郵件進行驗證。

required:function(){} 的範例如下：




複製程式碼


程式碼如下：

$().ready(function() {
  $("#signupForm").validate({
    規則:
    {
     ：函數()
        {
          返回true;
       🎜>          回傳false;
        }
      }
 訊息:
    {
      姓名: "請輸入姓名",
      電子郵件:
         電子郵件: "請輸入正確的email位址"
      }
    }
  });
});
//訊息處，如果某個控制項沒有訊息，就會呼叫預設的資訊
script>

   

        開關：
  "radio" />
        開
        關閉
   

   

      電子郵件標籤>
     電子郵件標籤>
     電子郵件1" name="email" />
   

   

       
    /p>

經過測試得知，即使email:function(){return false}); 是回傳false，但required:function(){return true; }，是回傳true，那麼，除了驗證是否為空外，還驗證email格式。相反email:function(){reuturn false;}設定無效。進一步測試，去掉required:function(){return true;}，只保留：email:function(){reuturn false;}，仍然驗證email格式。程式碼如下：




複製程式碼

程式碼如下：

  $("#").valate ({    規則:    {      姓名: "必填",       >        {          return alse;         }

      }

    },
    訊息：
 範例中的規則規則中的名字，電子郵件等，問題是，在輸入中有id，還有name屬性，那JQuery Validation取得哪一個呢？是輸入的name屬性值，不是id屬性值。
定義樣式程式碼




複製程式碼


程式碼如下：


/* jQu */
input.error{border: 1px 點狀紅色;}

label.error{
 background-image:url('del.gif'); background-repeat:no-repeat ;

  左內邊距：18px;
  顏色：紅色;

}
input.error 定義input控制項樣式

label.error 定義出錯訊息的樣式

如下圖：