首頁 > web前端 > js教程 > jQuery.Validate驗證庫的使用介紹_jquery

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

WBOY
發布: 2016-05-16 17:35:14
原創
1058 人瀏覽過

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" name="firstname" class="{validate:{required:true,minlength:5,messages:{required:'請輸入內容',minlength:'字串長度不能小於5'}}}" />
 


 
 
 


 


 
 
 


 


 
 
 


   


       
   


注意:


規則部分應用完整形式,如下:

正確寫法:


複製程式碼 程式碼如下:

錯誤寫法:


複製程式碼 程式碼如下:

再有一種方式


這樣可以使用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>


   


       

 


  電子郵件標籤>
 
 


 


 
 
 


 


 
 
 


   


       




注意:規則部分應用完整形式,即

正確寫法:

複製程式碼程式碼如下:


程式碼如下:


複製程式碼


代碼如下:


複製程式碼程式碼如下:






$().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" />
       
        關閉
   


   


     


   


       
    /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;
  顏色:紅色;

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板