要触发表单验证,可以使用valid()
方法。以下是一个示例:
<form id="registerForm">
<input type="text" name="username" required>
<input type="email" name="email" required>
<input type="password" name="password" required>
<input type="password" name="confirmPassword" required>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
var formRules = {
username: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
equalTo: "#registerForm input[name='password']"
}
};
$("#registerForm").validate(formRules);
$("#registerForm").submit(function(e) {
e.preventDefault(); // 阻止表单提交
if ($("#registerForm").valid()) {
// 表单验证通过,执行提交逻辑
console.log("Form is valid. Submitting...");
// 在这里执行提交表单的操作
} else {
// 表单验证失败,执行错误处理逻辑
console.log("Form is invalid. Please check your inputs.");
}
});
});
</script>
在上面的示例中,我们在$("#registerForm")
上调用了validate()
方法来应用表单验证规则。然后,我们在表单的submit
事件处理程序中使用valid()
方法来判断表单是否有效。如果表单验证通过,我们可以执行提交表单的操作。如果表单验证失败,我们可以执行错误处理逻辑。
注意,在表单的submit
事件处理程序中使用e.preventDefault()
方法来阻止表单的默认提交行为,以便我们可以手动控制表单提交的逻辑。
希望这个示例能帮助你触发表单验证并根据验证结果执行相应的操作。