jQuery Validate依賴項介紹

admin發表於2018-08-08
jQuery
在實際應用中，可能有這樣的需求，那就是必須滿足其中的一個條件，才能繼續下面的動作。

比如選中一個核取方塊之後，依賴於此核取方塊的其他核取方塊則成為必須選中的，否則這些核取方塊可以忽略。

程式碼例項如下: 

[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;
}
span.error {
  font-size:12px;
  color:red;
}
</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({
    errorClass: "error",
    errorElement: "span",
    errorPlacement: function (error, element) {
      error.appendTo(element.parent());
    },
    rules: {
      xingqu: {
        required: "#go:checked",
        minlength:3
      }
    },
    messages: {
      xingqu:{
        required: "興趣愛好是不選專案",
        minlength:"最少選擇3個興趣愛好"
      }
    }
  });
});
</script>
</head>
<body>
<div id="ant">
  <ul></ul>
</div>
<form id="myform">
  <ul>
    <li>是否繼續填寫:<input type="checkbox" value="1" id="go" name="go" /></li>
    <li>興趣:
      <input type="checkbox" value="1" name="xingqu"/>讀書
      <input type="checkbox" value="2" name="xingqu" />踢球
      <input type="checkbox" value="3" name="xingqu" />象棋
      <input type="checkbox" value="4" name="xingqu" />前端
      <input type="checkbox" value="5" name="xingqu" />軍事
      <input type="checkbox" value="6" name="xingqu" />武術
      <input type="checkbox" value="7" name="xingqu" />演講
    </li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

在上面的程式碼中，如果選中是否繼續核取方塊，那麼興趣核取方塊就是必選的，否則可以忽略。

required驗證規則的引數不僅僅是布林值，還可以是選擇器或者函式；如果選擇器條件成立或者函式的返回值為true，那麼就說明依賴成立，對應的表單元素就程式設計必選項。

相關文章