jQuery Validate checkbox和radio驗證

admin發表於2018-10-28
jQuery

下面通過程式碼例項介紹一下如何實現對於核取方塊和單選按鈕的一些驗證。

如果要求核取方塊和單選按鈕是必選項，同樣也是使用required。

程式碼例項如下:

[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());
    },
  });
});
</script>
</head>
<body>
<div id="ant">
  <ul></ul>
</div>
<form id="myform">
  <ul>
    <li>興趣:
      <input type="checkbox" value="1" name="xingqu" required/>讀書
      <input type="checkbox" value="2" name="xingqu" />踢球
      <input type="checkbox" value="3" name="xingqu" />象棋
      <input type="checkbox" value="4" name="xingqu" />前端
    </li>
    <li>性別:
      <input type="radio" value="1" name="sex" required/>男
      <input type="radio" value="2" name="sex"/>女
    </li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

上面的程式碼實現核取方塊和單選按鈕必選按鈕效果。

特別說明:規則只需要在第一個核取方塊或者單選按鈕上規定即可。

當然我們也可以將規則寫在js程式碼中，程式碼片段如下:

[JavaScript] 純文字檢視 複製程式碼
rules: {
  xingqu: "required",
  sex: "required"
}

更多內容可以參閱jQuery Validate驗證規則的使用一章節。

還有一種常見的需求就是限定核取方塊的選中數目，可以參閱jQuery Validate限定核取方塊選中的數目一章節。

相關文章