使用setCustomValidity后input的checkValidity始终失效的解决方案咨询

问题核心在于你调用checkValidity()前没有先清空之前设置的自定义验证消息，导致原生校验被之前的错误状态干扰，陷入"设置错误消息→checkValidity返回false→继续设置错误消息"的循环。

修正步骤： #

• 在调用checkValidity()前，先调用input.setCustomValidity("")清空自定义错误，让原生校验能正常执行
• 调整正则表达式：原生pattern属性默认会用^和$包裹规则，所以\b边界符可能导致匹配异常，建议直接用^\d{3}$明确匹配3位数字

修改后的代码： #

const cvvReg = /^\d{3}$/;

const handleSubmit = (e) => {
    e.preventDefault();
};

const handleChange = (e) => {
    const input = e.target;
    // 先清空自定义错误，确保原生校验不受干扰
    input.setCustomValidity("");
    // 执行原生校验
    const isValid = input.checkValidity();
    setInputValid(isValid);
    // 根据校验结果设置自定义消息
    input.setCustomValidity(isValid ? "" : "请输入3位数字的CVV码");
};

// 表单部分保持不变
<form onSubmit={handleSubmit} style={formStyle}>
    <input
        type="text"
        pattern={cvvReg.source}
        onChange={handleChange}
        required
    />
    <button type="submit">Submit</button>
</form>

原理说明： #

setCustomValidity()一旦设置了非空字符串，输入框就会被标记为invalid，直到消息被清空。所以必须先清空消息，再让checkValidity()基于原生规则（pattern、required等）判断有效性，最后再根据结果设置自定义提示。

内容的提问来源于stack exchange，提问作者physicsboy