jquery validate 詳解一

taogchan發表於2014-04-02
   jQuery校驗官網地址:

一匯入js


二、預設校驗規則

(1)required:true               必輸欄位
(2)remote:"check.php"         
使用ajax方法呼叫check.php驗證輸入值
(3)email:true                 
必須輸入正確格式的電子郵件
(4)url:true                   
必須輸入正確格式的網址
(5)date:true                  
必須輸入正確格式的日期 日期校驗ie6出錯,慎用
(6)dateISO:true               
必須輸入正確格式的日期(ISO),例如:2009-06-231998/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]        
輸入長度必須介於 510 之間的字串")(漢字算一個字元)
(15)range:[5,10]              
輸入值必須介於 510 之間
(16)max:5                     
輸入值不能大於5
(17)min:10                    
輸入值不能小於10

 

三、預設的提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter 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} 的字串"),
  rangelength: jQuery.validator.format("
請輸入 一個長度介於 {0}{1} 之間的字串"),
  range: jQuery.validator.format("
請輸入一個介於 {0}{1} 之間的值"),
  max: jQuery.validator.format("
請輸入一個最大為{0} 的值"),
  min: jQuery.validator.format("
請輸入一個最小為{0} 的值")
});

推薦做法,將此檔案放入messages_cn.js中,在頁面中引入

四、使用方式

1.將校驗規則寫到控制元件中




$().ready(function() {
 $("#signupForm").validate();
});



       
       
  
  
  
  
  

確認密碼
  
       


使用class="{}"的方式,必須引入包:jquery.metadata.js

可以使用如下的方法,修改提示內容:
class="{required:true,minlength:5,messages:{required:'
請輸入內容'}}"

在使用equalTo關鍵字時,後面的內容必須加上引號,如下程式碼:
class="{required:true,minlength:5,equalTo:'#password'}"

2.將校驗規則寫到js程式碼中


$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "
請輸入姓名",
   email: {
    required: "
請輸入Email地址",
    email: "
請輸入正確的email地址"
   },
   password: {
    required: "
請輸入密碼",
    minlength: jQuery.format("
密碼不能小於{0}個字 符")
   },
   confirm_password: {
    required: "
請輸入確認密碼",
    minlength: "
確認密碼不能小於5個字元",
    equalTo: "
兩次輸入密碼不一致不一致"
   }
  }
    });
});

//messages處,如果某個控制元件沒有message,將呼叫預設的資訊


       
       
  
  
  
  
  
確認密碼
  
       


required:true 必須有值
required:"#aa:checked"
表示式的值為真,則需要驗證
required:function(){}
返回為真,表時需要驗證
後邊兩種常用於,表單中需要同時填或不填的元素

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/22392018/viewspace-1134680/,如需轉載,請註明出處,否則將追究法律責任。

相關文章