jQuery Validate限定核取方塊選中的數目

admin發表於2018-10-28
jQuery

對於核取方塊的必選驗證可以參閱jQuery Validate對checkbox和radio驗證一章節。

下面介紹一下如何限定核取方塊的選中數目。

程式碼例項如下:

[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: true,
        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" 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>

上面的程式碼可以設定核取方塊為必選，並且限定最少選擇3個。

如果想要限定選定m-n個可以使用如下規則:

[JavaScript] 純文字檢視 複製程式碼
rangelength: [3,5]

相關文章