HTML5 表單驗證：setCustomValidity 非提交時調用指南

核心結論

可在任意事件中調用，不限於提交時。常用於 `blur`、`input`、`change` 等事件實現即時驗證反饋。

使用示例

即時驗證（失去焦點時）

<input type="email" id="email" required>
<script>
document.getElementById('email').addEventListener('blur', function() {
    if (this.validity.typeMismatch) {
        this.setCustomValidity('請輸入有效的郵箱地址');
    } else {
        this.setCustomValidity(''); // 清除錯誤，關鍵步驟！
    }
});
</script>

自定義複雜規則

<input type="password" id="pwd" required>
<input type="password" id="confirm" required>
<script>
document.getElementById('confirm').addEventListener('input', function() {
    const pwd = document.getElementById('pwd').value;
    if (this.value !== pwd) {
        this.setCustomValidity('兩次輸入的密碼不一致');
    } else {
        this.setCustomValidity('');
    }
});
</script>

關鍵機制

• `setCustomValidity(message)` 設置驗證消息，**非空字符串表示驗證失敗**
• **必須在通過驗證時調用 `setCustomValidity('')` 清除**，否則表單永遠無法提交
• 配合 `validity` 對象檢查具體失敗類型：`valueMissing`、`typeMismatch`、`patternMismatch` 等
• 顯示樣式可通過 CSS `:invalid`、`:valid` 控制

完整驗證流程控制

form.addEventListener('submit', function(e) {
    // 手動觸發所有字段驗證
    if (!this.checkValidity()) {
        e.preventDefault();
        // 可選：聚焦第一個無效字段
        this.querySelector(':invalid').focus();
    }
});

// 重置表單時清除自定義驗證
form.addEventListener('reset', function() {
    this.querySelectorAll('input').forEach(input => input.setCustomValidity(''));
});

瀏覽器兼容性

IE10+、Edge、Chrome、Firefox、Safari 全支持。移動端瀏覽器均支持。