Chrome 65中setCustomValidity('')在输入框上为何被忽略？

Hey，我来帮你搞定这个HTML5表单自定义验证的问题～ 你提到的场景是：输入框用pattern验证4位十六进制字符串，同时通过oninvalid和setCustomValidity()设置自定义错误消息，这里有个很容易踩的坑，我一步步给你讲清楚：

常见错误示例（别这么写！） #

很多人一开始会这么写，但会导致验证规则“失效”——比如输入正确内容后，还是一直显示错误：

<!-- 错误写法：会导致输入正确后仍显示错误 -->
<input type="text" pattern="[a-f,0-9]{4}" oninvalid="this.setCustomValidity('请输入4位十六进制字符串')">

问题出在：setCustomValidity()只要传入非空字符串，就会把输入框标记为永久无效，除非你主动重置这个状态。

正确实现方式 #

内联事件版 #

<input type="text" 
       pattern="(?i)[a-f0-9]{4}"  <!-- (?i)表示大小写不敏感，可根据需求去掉；注意不要加逗号！ -->
       required  <!-- 可选，如果你需要强制用户输入内容 -->
       oninvalid="this.setCustomValidity('请输入4位有效的十六进制字符串（仅允许a-f、0-9，大小写均可）')"
       oninput="this.setCustomValidity('')" /> <!-- 关键：输入时重置错误状态 -->

分离JavaScript版（更易维护） #

如果觉得内联事件不够优雅，可以用事件监听：

const hexInput = document.querySelector('input[pattern="(?i)[a-f0-9]{4}"]');

// 验证失败时设置自定义消息
hexInput.addEventListener('invalid', function(e) {
  e.target.setCustomValidity('请输入4位有效的十六进制字符串（仅允许a-f、0-9，大小写均可）');
});

// 用户输入时重置错误状态
hexInput.addEventListener('input', function(e) {
  e.target.setCustomValidity('');
});

关键细节说明 #

1. 修正pattern正则：你原来写的[a-f,0-9]{4}里的逗号是多余的，会被当成允许输入的字符，正确的十六进制匹配应该是[a-f0-9]{4}；如果要支持大小写，加上(?i)修饰符。
2. 必须重置错误状态：当用户开始输入新内容时，一定要用setCustomValidity('')清空错误消息，这样输入框才能重新进行验证，恢复有效状态。
3. required属性可选：如果不需要强制用户输入内容（允许空值），可以去掉required，此时只有当用户输入内容时才会触发pattern验证。

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