實用的表單驗證插件--jquery Validation

時間  2019-12-05
標籤 實用 表單 驗證 插件 jquery validation 欄目 HTML 简体版
原文   原文鏈接

Validation文檔翻譯

前言

Validation做爲表單驗證中最經常使用的插件，爲我在開發過程當中提供了不少便利的地方。雖說我很經常使用，可是我真的不敢說我會用Validation。每次使用都是在菜鳥教程上粘貼代碼，修改rule就這麼用了。因此本身決定仍是從頭擼一遍文檔，可是沒找到中文文檔。這就有了翻譯這個文檔的意願了，那就開始吧。官方文檔的位置css

起步

引用

使用下菜鳥教程的cdn，由於依賴jquery，因此必須先引入jqueryhtml

<script src =「http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js」> </ script>
<script src =「http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js」> </ script>>

使用方式

  1. 將校驗規則寫到控件中：jquery

    <form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
    根據表單控件的類型和屬性進行校驗，這樣比較不靈活

  2. 將校驗規則寫到js代碼中ajax

    $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "請輸入您的名字",
      lastname: "請輸入您的姓氏",
      username: {
        required: "請輸入用戶名",
        minlength: "用戶名必需由兩個字母組成"
      },
      password: {
        required: "請輸入密碼",
        minlength: "密碼長度不能小於 5 個字母"
      },
      confirm_password: {
        required: "請輸入密碼",
        minlength: "密碼長度不能小於 5 個字母",
        equalTo: "兩次密碼輸入不一致"
      },
      email: "請輸入一個正確的郵箱",
      agree: "請接受咱們的聲明",
      topic: "請選擇兩個主題"
    }
});
    每一個表單空間單獨的進行配置，配置對象中的rule用於設置校驗標準，messages用於設置校驗錯誤的提示信息。

文檔

.validate([option])

validate是Validation的主函數，用於驗證選擇的表單。數組

option

類型：objectapp

  • debug（默認值：false）
    類型：boolean
    容許debug模式。若是他設置爲true，表單不會被提交併且驗證的錯誤信息將在控制檯被輸出。
    例子：組織表單進行提交，設置提示驗證信息和debug信息。dom

    $("#myform").validate({
  debug: true
});

  • submitHandler（默認值：原生的表單提交）
    類型：function()
    表單驗證經過後提交表單的回調函數。
    例子：當表單驗證後使用ajax提交表單。curl

    $("#myform").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit();
  }
});

    例子：使用回調函數先執行部分操做而後再提交表單。注意：參數中的form對應的是一個DOM元素，並且這裏提交不會再次出發此回調函數。ide

    $("#myform").validate({
  submitHandler: function(form) {
    // 表單提交前的操做
    form.submit();
  }
});

    此回調有兩個參數：函數

    • form

      類型：DOM元素
當前被驗證的form表單元素。

    • event

      類型：事件對象
表單提交的事件

  • invalidHandle
    類型：function()
    當表格沒有經過驗證提交時的回調函數
    例子：當用戶嘗試提交一個驗證無效的表單時，在表格內顯示一個展現有多少錯誤信息

    $("#myform").validate({
  invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? 'You missed 1 field. It has been highlighted'
        : 'You missed ' + errors + ' fields. They have been highlighted';
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

    此回調函數有兩個參數：

    • event
      類型：事件對象

    一個自定義事件對象，由於該函數被綁定爲一個事件處理程序。

    • validator
      類型：Validator

    當前表單驗證的實例。

  • ignore（默認值：ignore）
    類型：css選擇器
    當驗證的時候，將選擇器元素過濾出來不進行校驗。使用jquery的not()方法，因此被過濾的表單空間不進行校驗。type值爲submit和reset的input元素也被過濾掉，他們都是被被禁的元素。
    例子：當校驗的時候過濾掉帶有「ignore」類名的元素

    $("#myform").validate({
  ignore: ".ignore"
});

  • rules（默認值：校驗規則從標籤的類名、屬性、數據中）
    類型：對象
    鍵值對定義用戶的校驗規則。鍵對應的元素（或者一組的複選框/單選框）的name屬性，值是一個對象含有規則/鍵值對或字符串組成。能夠與類名、屬性、數據中的校驗規則並用。每一個規則均可以定義爲一個含有depends屬性，用於與符合某些條件的規則。看下面第二個例子能更清楚這種規則定義方式。
    例子：定義一個必填的name元素和一個必填的email元素（使用簡便方式）和有一個有效的email地址。

    $("#myform").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

    例子：定義一個必填email地址的contact元素，最後取決於一個複選框是否選中來驗證email規則

    $("#myform").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

    例子：配置一個規則須要一個參數，且有一個依賴的回調函數

    $("#myform").validate({
  rules: {
 // at least 15€ when bonus material is included
 pay_what_you_want: {
   required: true
   min: {
     // min needs a parameter passed to it
     param: 15,
     depends: function(element) {
       return $("#bonus-material").is(":checked");
     }
   }
 }
  }
});

  • messages(默認值：被使用的驗證規則的默認驗證信息)
    類型：對象
    鍵值對的形式定義自定義信息。鍵是驗證元素的name值，值是這個元素顯示出的驗證信息。值除了是一個單純的字符串，也能夠是對應此元素每一個驗證規則的對象。重載一個元素的默認驗證信息（經過這個方式）。每message多是一個字符串或者是一個函數。這個函數被調用在validator的做用域內，這個函數的第一個參數是驗證規則中的參數，第二個參數是驗證的元素，並且必須返回一個字符串做爲驗證信息。
    例子：定義一個必填的name元素和一個必填的驗證email規則的元素。一個簡單的信息對應必填的name元素，兩個信息對應email元素。

    $("#myform").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  }
});

    例子：校驗name元素規則爲必填和至少兩個字符。提供一個函數信息使用jquery.validataor.format以免在兩個地方指定參數。

    $("#myform").validate({
  rules: {
    name: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    name: {
      required: "We need your email address to contact you",
      minlength: jQuery.validator.format("At least {0} characters required!")
    }
  }
});

  • groups
    類型：對象
    定義錯誤信息的組。一個組包含做爲鍵的任意組名和一個用空格分隔的元素name的字符串列表做爲值。使用errorPlaement去控制這個組的驗證信息被放置的位置。
    例子：用一個table佈局form元素，放置錯誤信息在下一個單元input以後。

    $("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
});
  • normalizer
    類型：函數
    爲驗證，預處理或轉換元素的值。這個放在後面詳細說。

  • onsubmit(默認值：true)
    類型：bool
    在表單提交的時候進行驗證。設置false時只能其餘事件引發驗證。
    設置成函數能夠設什麼時候執行驗證。
    一個布爾值的true不是一個有效值，就是true無需設置。
    例子：當表單提交的不驗證，容許用戶使用自定義的方式提交。包括按鍵、失去焦點、點擊事件等。

    $("#myform").validate({
  onsubmit: false
});

  • onfocusout
    類型：布爾或者函數
    校驗元素（除了checkboxes或者radio按鈕）在失去焦點的時候。若是這個元素沒有輸入任何內容，則跳過全部規則，除非這個元素已經被標記爲錯誤。
    設置一個函數去界定什麼時候進行校驗。
    一個true值不是一個有效的值。
    例子：禁用對焦驗證。

    $("#myform").validate({
  onfocusout: false
});

    他的回調函數被傳入兩個參數：

    • element
      類型：元素

    這個元素是當前正在被驗證的，是一個dom元素。

    • event
      類型：時間對象

    這個失去焦點的事件對象。

  • onkeyup
    類型：布爾值或者函數
    驗證元素在釋放按鍵的時候。當沒有表單元素標記爲無效的時候，也不會發生。除上述狀況以外，全部的規則將被每次按鍵事件所引發。設置false將禁止。
    設置一個函數去界定什麼時候進行校驗。
    一個true值不是一個有效的值。
    例子：禁止按鈕驗證

    $("#myform").validate({
  onkeyup: false
});

    這個回調函數被傳兩個參數：

    • 元素
      類型：元素

    這個元素是當前正在被驗證的，是一個dom元素。

    • event
      類型：時間對象

    這個按鍵的事件對象。

  • onkeyup
    校驗checkboxes、radio按鈕，和select元素在click事件。設置false時去禁止。
    設置一個函數去界定什麼時候進行校驗。
    一個true值不是一個有效的值。
    例子：禁止點擊校驗checkboxes、radio按鈕和select元素。

    $("#myform").validate({
  onclick: false
});
    • 元素
      類型：元素

    這個元素是當前正在被驗證的，是一個dom元素。

    • event
      類型：時間對象

    這個點擊的事件對象。

  • focusinvalid
    類型：布爾值
    聚焦最後一個激活的元素或者第一個驗證無效的元素，經過使用validator.focusinvalid()方法。最後一個被激活的元素是表單提交的時候最後一個聚焦的元素，阻止他失去焦點。若是沒有一個元素被聚焦他將會獲取表單中第一個元素，除非這個配置爲false。
    例子：禁止聚焦無效的元素。

    $("#myform").validate({
  focusInvalid: false
});

  • focusCleanup（默認值爲：false）
    類型：布爾值
    若是設置爲enabled，移除錯誤信息的css類名和隱藏全部的錯誤信息，當此元素被聚焦的時候。防止聯合focusinvalid一塊兒使用。
    例子：在聚焦表單元素的時候，移除錯誤的css類名和隱藏錯誤信息。

    $("#myform").validate({
  errorClass: "invalid"
});

  • errorClass（默認值爲：'error'）
    類型：字符串
    使用這個類名建立標籤，查找錯誤的標籤並添加到錯誤的元素。
    例子：設置錯誤的類名爲'invalid'

    $("#myform").validate({
  errorClass: "invalid"
});

  • validClass（默認值爲：'valid'）
    類型：字符串
    這個類名是增長到表單元素，在這個元素被驗證認定爲有效的以後。
    例子：設置有效的類名爲'success'

    $("#myform").validate({
  validClass: "success"
});

  • errorElement（默認值爲：'label'）
    類型：字符串
    使用這個標籤類型去建立錯誤信息提示。默認的是label，這樣的好處是能夠用for屬性建立一個意思明確的連接在錯誤信息和字段。
    例子:設置錯誤的標籤類型爲'em'。

    $("#myform").validate({
  errorElement: "em"
});

  • wrapper（默認值爲：window）
    類型：字符串
    包裹錯誤標籤用此屬性定義的標籤。結合errorLabelContainer屬性建立一個錯誤信息列表。
    例子：包裹每一個錯誤元素使用li標籤，建立一個錯誤信息列表。

    $("#myform").validate({
  wrapper: "li"
});

  • errorLabelContainer
    類型：css選擇器
    隱藏和展現驗證時的容器
    例子：全部的錯誤的標籤被展現在一個id爲‘messageBox’無序列表,經過errorContainer選項傳遞的選擇器指定元素中。全部的錯誤元素被包裹在一個li元素中，製成一個信息列表。

    $("#myform").validate({
  errorLabelContainer: "#messageBox",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

  • errorContainer
    類型：css選擇器
    隱藏和展現驗證時的容器
    例子：使用一個額外的容器包裹錯誤信息。當驗證錯誤的時候，這個元素將全部的錯誤信息顯示和隱藏。然而，錯誤標籤自己被添加到做爲errorLabelContainer給出的元素，這裏是無序列表。 所以，錯誤標籤也被包裝到li元素（包裝選項）中。

    $("#myform").validate({
  errorContainer: "#messageBox1, #messageBox2",
  errorLabelContainer: "#messageBox1 ul",
  wrapper: "li", debug:true,
  submitHandler: function() { alert("Submitted!") }
});

  • showErrors
    類型：函數
    一個自定義信息展現的回調函數。獲取錯誤信息的對象做爲第一個參數，一個錯誤信息的數組做爲第二個。此函數的上下午爲驗證對象自己。這些參數只包含當前已經驗證過的元素，當在focusout或keyup上進行驗證時，它們能夠是單個元素。能夠經過調用this.defaultShowErrors（）來觸發（除了本身的消息）默認行爲。
    例子：每次一個錯誤信息呢被展現的時候更新無效元素的數量。伴隨着默認的錯誤信息的展現。

    $("#myform").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});
    • errorMap
      類型：對象

    鍵值對，對象的鍵是校驗的input元素name，而值是顯示的校驗信息。

    • errorList
      類型：數組

    一個包含當前已經被校驗過的元素的數組。包含的對象有兩個屬性

    - message
類型：字符串
input元素展現的驗證信息
- element
類型：元素
此條目的dom節點

  • errorPlacement （默認值爲：放置錯誤信息的標籤在無效的input元素後面）
    類型：函數
    自定義產生的錯誤驗證標籤的位置。第一個參數產生的驗證錯誤信息的jquery對象。第二個參數是驗證無效的input元素的jquery對象。
    例子：使用一個table來佈局form表單，防止錯誤信息在input後的td裏。

    $("#myform").validate({
  errorPlacement: function(error, element) {
    error.appendTo( element.parent("td").next("td") );
  }
});

    這個回調函數有兩個參數：

    • error
      類型：jquery對象

    要插入DOM中的錯誤標籤。

    • element
      類型：jquery對象

    驗證信息對應的已經驗證input元素，用於error的定位。

  • success
    類型：字符串或函數
    若是已經定義，將產生一個對有效input元素的驗證信息。若是是賦值的是字符串，則將給這個驗證信息的標籤加上一個class類名。若是賦值是函數，這個驗證信息標籤的jquery是第一個參數，第二個參數是被驗證的input元素（注意是dom元素）。能夠對驗證信息進行修改文字。
    例子：添加一個'valid'類名到驗證信息的元素，使用css控制樣式。

    $("#myform").validate({
  success: "valid",
  submitHandler: function() { alert("Submitted!") }
});

    例子：添加一個'valid'類名到驗證信息的元素，經過css控制演示，而且添加文字‘ok！’

    $("#myform").validate({
  success: function(label) {
    label.addClass("valid").text("Ok!")
  },
  submitHandler: function() { alert("Submitted!") }
});

    這個回調函數傳入兩個參數：

    • label
      類型：jquery

    驗證信息標籤，使用它能夠添加class類名和替換文本內容。

    • element
      類型：dom元素

    當前驗證經過的表單元素對應的dom元素。

  • highlight（默認值：添加errorClass（在option中設置）到表單元素）
    類型：函數
    設置無效表單元素如何高亮。
    例子：經過先淡出再淡入的效果高亮一個驗證無效的元素。

    $("#myform").validate({
  highlight: function(element, errorClass) {
    $(element).fadeOut(function() {
      $(element).fadeIn();
    });
  }
});

    例子：添加一個error class到他的驗證無效元素和驗證信息

    $("#myform").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

    這個回調函數傳入三個參數：

    • element
      類型：DOM元素

    當前驗證無效的表單元素。

    • errorClass
      類型：字符串

    option中errorClass當前值。

    • validClass
      類型：字符串

    option中validClass當前值。

  • unhighlight（默認值：移除errorClass）
    類型：函數
    設置失去聚焦的回調函數，參數與highlight相同。
  • ignoreTitle（默認值：false）
    類型：布爾值

.valid()

檢查是否符合驗證規則，使用這個方法的以前必須對form元素執行validate()。
例子：設置一個form表單的驗證規則，而後檢查表單是否符合驗證規則在點擊按鈕以後。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<style>
 
  </style>
</head>
<body>
<form id="myform">
<form id="myform">
  <input type="text" name="name" required>
  <br>
  <button type="button">Validate!</button>
</form>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
  alert( "Valid: " + form.valid() );
});
</script>
</body>
</html>

.rules()

讀取、添加和移除一個元素的規則。

  • rules()
    這個方法不用任何參數。讀取這個表單元素的驗證規則。

  • rules("add",rules)

    • add
      類型：字符串
    • rules
      類型：對象

    添加的驗證規則。接受validate方法中相同格式的驗證規則。

  • rules("remove",rules)

    • remove
      類型：字符串
    • rules
      類型：對象

    設置爲用空格隔開的規則名稱字符串，則會刪除這些規則並返回。若是沒有設置的話，移除全部的規則並返回。

未完待續……

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程