是的,HTML表單驗證支持自定義規則。你可以使用pattern
屬性來定義一個正則表達式,以驗證輸入數據的格式是否符合預期。例如,以下代碼可以驗證輸入的數據是否為有效的電子郵件地址:
<input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
你也可以使用JavaScript來實現更復雜的自定義驗證規則。你可以通過獲取表單元素的值,并使用JavaScript函數來驗證該值是否符合預期。例如,以下代碼可以驗證輸入的數據是否為有效的電話號碼:
<input type="text" id="phone" required>
<script>
function validatePhone(phone) {
// 定義正則表達式來驗證電話號碼格式
var pattern = /^\d{3}-\d{3}-\d{4}$/;
return pattern.test(phone);
}
// 獲取表單元素的值,并進行驗證
var phoneInput = document.getElementById("phone");
if (!validatePhone(phoneInput.value)) {
alert("請輸入有效的電話號碼!");
phoneInput.focus();
return false;
}
</script>
在這個例子中,我們定義了一個名為validatePhone
的函數,該函數使用正則表達式來驗證電話號碼格式。然后,我們獲取了表單元素的值,并使用該函數進行驗證。如果輸入的數據不符合預期,我們會彈出一個警告框,并聚焦到表單元素上,以便用戶可以更正輸入。