介紹#
在按照 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();
});