用setCustomValidity()可覆盖浏览器默认错误文案，传空字符串表示通过，传非空字符串触发customError状态并阻止提交；需在input/blur事件中动态设置，配合DOM更新实现UI同步提示。
如何用 setCustomValidity() 覆盖浏览器默认错误文案
直接改掉「Please fill in this field」这类英文提示，核心就靠 setCustomValidity()。它不触发验证，只设置当前字段的自定义错误字符串；传空字符串 '' 表示“校验通过”，传非空字符串则让该字段进入 validity.customError === true 状态，并阻止表单提交。
常见错误是只调用一次、没配合事件监听——比如用户输入后又删空，但错误文案还挂着。必须在每次输入或失焦时重新评估并重置：
- 对
input、blur事件都绑定处理函数 - 先调用
setCustomValidity('')清除旧状态，再根据逻辑决定是否设新文案 - 不要在
submit事件里统一设——此时浏览器已弹出默认提示，晚了
为什么 title 属性不能替代 setCustomValidity()
title 只是 tooltip，不影响验证逻辑，也不阻止提交；而 setCustomValidity() 是 Constraint Validation API 的一部分，会真实改变 validity 对象和表单可提交性。两者完全不在一个层级。
典型误用场景：给 ，以为鼠标悬停就能当错误提示。结果用户提交失败时，还是看到浏览器原生英文提示，title 根本没被读取。
真正起效的最小闭环是：
- 监听
input或blur - 检查值（如用正则判断手机号）
- 匹配失败 →
input.setCustomValidity('请输入11位手机号') - 匹配成功 →
input.setCustomValidity('')
如何让自定义文案和 UI 提示同步显示（不只是 tooltip）
浏览器只把 setCustomValidity() 的内容用在 reportValidity() 或原生 tooltip 中，不会自动插入到页面 DOM。想在输入框下方显示红字提示，得自己写逻辑：
- 为每个表单项配一个
容器 - 在设置
setCustomValidity()后，同步更新对应span的textContent - 用
input.validity.customError判断是否要显示该提示（避免空文案也显示） - 别忘了在验证通过时清空
span并移除样式类，否则错误态残留
示例关键片段：
input.addEventListener('blur', () => {
if (!/^\d{11}$/.test(input.value)) {
input.setCustomValidity('手机号必须为11位数字');
errorSpan.textContent = '手机号必须为11位数字';
errorSpan.classList.add('show');
} else {
input.setCustomValidity('');
errorSpan.textContent = '';
errorSpan.classList.remove('show');
}
});
兼容性与容易被忽略的细节
Constraint Validation API 在现代浏览器中支持良好（Chrome 10+、Firefox 4+、Safari 10.1+），但 IE 完全不支持——如果需兼容 IE，得降级用 JS 手动拦截 submit 并 preventDefault()，自行管理所有校验和提示。
更常被忽略的是：某些属性会覆盖 setCustomValidity() 的效果。比如同时设置了 required 和 minlength="6"，但只对其中一个调用 setCustomValidity()，那么其他约束仍会触发默认提示。解决办法是——只要用了自定义文案，就把所有校验逻辑收归 JS，去掉原生属性（如删掉 required），全部用 setCustomValidity() 控制。
另外，reportValidity() 会强制触发所有字段的验证并显示提示，适合在提交前主动检查，但它不会跳转焦点，也不会滚动到第一个错误字段——这些得自己补。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
