HTML中input标签表单验证不通过时的提示修改教程-html教程-PHP中文网

浏览器原生表单验证文案不可直接修改，setcustomvalidity()需配合reportvalidity()或checkvalidity()触发提示，input事件中必须用setcustomvalidity("")重置状态，并在input后插入role="alert"的dom节点确保可访问性。

html中input标签表单验证不通过时的提示修改教程

浏览器原生的表单验证提示无法直接修改文案，title只在悬停时显示，pattern失败时的气泡文案完全由浏览器控制，且不可 CSS 样式化。

setCustomValidity() 必须配合事件才生效

只调用 input.setCustomValidity("邮箱格式错误") 不会弹出任何提示，也不会阻止提交。它只是往 validity 状态里存一个字符串，后续是否触发 UI 反馈，取决于你有没有主动触发验证。

想立刻看到提示：必须紧接着调用 input.reportValidity()
想在提交时统一处理：要在 form.addEventListener("submit", ...) 里先 e.preventDefault()，再对每个字段调用 checkValidity() 或 reportValidity()
常见错误是设了文案却忘了触发，结果用户点击提交毫无反应

input 事件里必须清空 customValidity

每次用户输入后，都要重新评估并重置状态。否则一旦 setCustomValidity("xxx") 被调用过，即使后来输入合法，validity.customError 仍为 true，所有原生校验（如 valueMissing、patternMismatch）都会被屏蔽。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

重置只能用 input.setCustomValidity("") —— 传 null、undefined 或空格 " " 都无效

推荐写法是在 input 事件中无条件清空，再根据当前值判断是否设错：

input.addEventListener("input", () => {
  input.setCustomValidity("");
  if (!input.value) {
    input.setCustomValidity("不能为空");
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value)) {
    input.setCustomValidity("邮箱格式不对");
  }
});

错误提示 DOM 必须插在 input 后面且可访问

把错误文案塞进 title、placeholder 或 label 里都不合规。前者移动端不可见，后者破坏语义且读屏器无法准确定位。

正确做法：每个 <input> 后紧跟一个 <div class="error" role="alert" aria-live="polite"></div>
用 visibility: hidden 控制显隐，别用 display: none，避免布局跳动
JS 渲染提示时，记得给出错字段调用 input.focus()，否则键盘用户可能卡在别处

最容易被忽略的是 customError 状态残留和 DOM 提示节点的可访问性绑定——前者导致后续所有校验逻辑失灵，后者让错误提示对屏幕阅读器“不可见”。这两个点不处理，自定义提示就只是视觉上的换皮，不是真正可用的验证反馈。