jQuery Validate驗證規則的使用

admin發表於2018-08-26
jQuery
外掛自帶有許多驗證規則，我們也可以自定義驗證規則。

關於自定義驗證規則可以參閱jQuery Validate新增自定義驗證規則一章節。

下面就通過程式碼例項介紹一下如何使用這些規則。

一.在標籤中設定:

所謂在標籤中設定，也就是將規則直接設定與HTML標籤之中。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<input type="text" name="username" required/>

上面的程式碼設定使用者名稱是必填的，否則會報錯。

此種設定方式相容了HTML5規則，大家知道required屬性是HTML5新增。

對於email這樣的規則，則無法像required這樣直接寫入標籤，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<input type="text" email />

上面規則錯誤；為了相容HTML5規範，又因為HTML5中type屬性值增加"email"，所以直用如下寫法即可:

[HTML] 純文字檢視 複製程式碼
<input type="email"/>

在不支援HTML5的瀏覽器中也是有效的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#one").validate();
});
</script>
</head>
<body>
<form id="one">
  <ul>
    <li>姓名:<input type="text" name="username" required/></li>
    <li>密碼:<input type="password" name="pw" required/></li>
    <li>郵箱:<input type="email" required/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

上面的程式碼可以規定使用者名稱、密碼和郵箱為必填，同時保證郵箱格式必須是正確的。

特別說明:不支援 type="range" 的input控制元件，這是因為需要比較最大，最小值，而不只是簡單的格式驗證。

還有一種方式可以將規則寫在標籤之中，那就是利用data-*方式，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate()
});
</script>
</head>
<body>
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="user" data-rule-required="true" data-msg-required="使用者名稱必填"/></li>
    <li>郵箱:<input type="text" name="email" data-rule-email="true" data-msg-email="郵箱格式錯誤"></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

二.通過class樣式類設定規則:

此方式其實也是將規則設定在標籤之內。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#one").validate();
});
</script>
</head>
<body>
<form id="one">
  <ul>
    <li>姓名:<input type="text" name="username" class="required"/></li>
    <li>密碼:<input type="password" name="pw" class="required"/></li>
    <li>郵箱:<input type="text" class="required email"/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

將規則直接作為class屬性值即可，但是這種方式有一種限制，那就是值是布林值的規則才能使用，對於maxlength、minlength和rangelength等規則就不適用，說白了只要不需要傳遞額外引數的規則就可以使用此方式（規則值為布林值就是沒有傳遞額外的引數，文章最後會有介紹）。

三.在js程式碼中設定:

推薦此種方式，因為可以有效的壓縮html程式碼量，將有效的內容展示給搜尋引擎，而不是對於頁面的一些控制。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    rules: {
      username: "required",
      pw: "required",
      email: {
        required:true,
        email:true
      }
    },
    messages: {
      name: "使用者名稱是必填專案",
      pw: "密碼是必填專案",
      email: {
        required: "郵箱是必填專案",
        email:"郵箱格式不正確"
      }
    }
  });
});
</script>
</head>
<body>
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="username"/></li>
    <li>密碼:<input type="password" name="pw"/></li>
    <li>郵箱:<input type="text" name="email"/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

在rules中給對應的表單元素設定規則；如果表單元素只有一個驗證規則，那麼後面直接跟規則的名稱字串即可（規則也是有限制的，那就是值必須是布林值，maxlength這樣的規則不可以），如果要是有多個規則，那麼也需要使用物件，就如上面的對郵箱規則的設定。在messages中設定對應驗證規則錯誤提示資訊，方式和rules一樣。

四.規則的實質:

其實每一個規則對應著一個方法，看如下程式碼:

[HTML] 純文字檢視 複製程式碼
<input type="email" name="username" />

上面的程式碼實現了對郵箱格式的驗證；其實它對應著一個方法，此方法會接受兩個引數，一個是當前表單元素的value屬性值，另一個是當前表單元素物件，內部對value屬性值的格式進行檢測，如果符合郵箱規範，那麼就返回true，否則返回false。

上面的規則只是對內容的格式進行判斷，沒有傳遞除了value和表單元素物件之外的額外引數；再看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<input type="text" name="username" minlength="5"/>

對於minlength規則，它對應的方法不但要接收value和當前表單元素物件兩個引數，還會接收一個parm引數，它傳遞的就是5這個值，方法的內部會將此值和表單元素的value屬性值進行比對，然後決定返回true還是false。

相關文章