jQuery Validate新增自定義驗證規則

admin發表於2018-08-05
jQuery

驗證外掛自帶大量驗證規則，能夠滿足基本的驗證需求，比如對於郵箱、日期和url等格式的驗證。

但是實際應用的需求是多種多樣的，這時候自帶的就難以滿足需求了，下面就通過程式碼例項介紹一下如何新增自定義驗證規則。

程式碼例項如下:

[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;
}
label.success {
  color:green;
}
</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>
$.validator.addMethod("mobile", function (value, element) {
  var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  return this.optional(element) || reg.test(value);
},"請輸入正確手機號碼")
$(document).ready(function () {
  $("#myform").validate({
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email: true
      },
      tel: "mobile"
    },
    messages: {
      username: "使用者名稱是必須",
      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="text" name="tel" /></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

上面的程式碼中，通過addMethod()方法新增了一個驗證手機號碼格式的規則。

如果電話文字框不填寫內容，那麼不會進行驗證，如果輸入內容，則進行電話號碼格式校驗，此功能是通過optional()方法實現。

新新增規則的使用方式和自帶規則是完全一致的，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.addMethod()方法參閱jQuery Validate的addMethod()方法一章節。

（2）.optional()方法參閱jQuery Validate的optional()方法一章節。

（3）.驗證規則的使用參閱jQuery Validate驗證規則的使用一章節。

相關文章