要實現分組驗證,你可以使用jQuery Validation插件的groups
選項。這個選項允許你將多個表單字段分成一組,并將它們合并為一個錯誤消息。
下面是一個使用jQuery Validation插件進行分組驗證的示例代碼:
HTML代碼:
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" /><br/>
<label for="email">郵箱:</label>
<input type="text" id="email" name="email" /><br/>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" /><br/>
<label for="confirmPassword">確認密碼:</label>
<input type="password" id="confirmPassword" name="confirmPassword" /><br/>
<input type="submit" value="提交" />
</form>
JavaScript代碼:
$(function() {
// 配置分組驗證規則
$("#myForm").validate({
groups: {
// 將密碼和確認密碼字段合并為一個錯誤消息
passwordGroup: "password confirmPassword"
},
rules: {
name: "required",
email: {
required: true,
email: true
},
password: "required",
confirmPassword: {
required: true,
equalTo: "#password" // 確認密碼必須和密碼字段相等
}
},
messages: {
name: "請輸入姓名",
email: {
required: "請輸入郵箱",
email: "請輸入有效的郵箱地址"
},
password: "請輸入密碼",
confirmPassword: {
required: "請確認密碼",
equalTo: "兩次輸入的密碼不一致"
}
}
});
});
在上面的代碼中,我們通過groups
選項將密碼和確認密碼字段合并為一個錯誤消息。然后,在rules
和messages
選項中,我們分別定義了各個字段的驗證規則和錯誤消息。
當表單提交時,如果有任何字段未通過驗證,插件會將錯誤消息顯示在表單下方。
希望這可以幫助到你!