介绍#
在按照 Bootstrap - Forms - Validation 对 <form> 中的可输入控件进行数据校验时，可以在控件上添加 required、minlength、maxlength 等常规通用的原生验证属性。
当我们有更复杂的业务逻辑时，还可以通过 JavaScript 自定义验证规则，这样就能实现表单验证自由了，本文将介绍如何实现。
使用方法#
function validate(inputID) {
const input = document.getElementById(inputID);
const validityState = input.validity;
if (validityState.valueMissing) {
input.setCustomValidity("你必须填满这个，哟！");
} else if (validityState.rangeUnderflow) {
input.setCustomValidity("我们需要一个更大的数字！");
} else if (validityState.rangeOverflow) {
input.setCustomValidity("太大了！");
} else {
input.setCustomValidity("");
}
// 立刻弹出 HTML 原生的控件验证提示
input.reportValidity();
}
// 失去焦点后验证密码规则
$('#password').on('blur', function (e) {
const password = $(this).val();
// 一个由我们自定义的验证方法
if (validatePassword(password)) {
// 密码符合要求
// 如果没有错误，需要将消息设置为空字符串，这样表单验证才能通过，也就是调用 checkValidity() 后返回 true
this.setCustomValidity('');
} else {
// 密码不符合要求
// 只要错误消息不为空，表单就不会验证通过(调用 checkValidity() 后返回 false)，也不会被提交
// 由于当前使用 Boostrap 的表单验证提示，所以这里给出的错误消实际上并不会显示在页面上，只是为了让当前控件不通过验证
this.setCustomValidity('Passwords must match');
}
// reportValidity() 会立刻弹出 HTML 原生的控件验证提示，由于当前使用 Bootstrap 的验证提示，所以这里不调用它触发原生的验证提示
//this.reportValidity();
});