如何用HTML代码给input输入框添加自定义错误提示文字-html教程-PHP中文网

setcustomvalidity() 必须配合 reportvalidity() 或表单提交才能生效，空字符串表示校验通过；title 属性仅作 tooltip 与验证无关；失焦提示需监听 blur 并调用 checkvalidity() 和 reportvalidity()；:user-invalid 伪类更适合视觉反馈。

如何用html代码给input输入框添加自定义错误提示文字

input 的 `setCustomValidity()` 怎么用才生效

直接调用 setCustomValidity() 不会立刻显示提示，必须配合表单提交或 reportValidity() 触发校验。浏览器只在用户交互（如提交、失焦）或显式调用时渲染错误消息。

错误提示文字由 setCustomValidity("xxx") 设置，空字符串 "" 表示“校验通过”，此时错误状态清除
仅设置不触发：必须紧接着调用 reportValidity() 才能强制显示提示（适合手动校验场景）
若依赖原生提交行为，确保 input 在 <form></form> 内，且没加 novalidate

为什么 `title` 属性不起作用

title 不是自定义错误提示的正确方式——它只作为 tooltip 显示，和表单验证完全无关。浏览器忽略 title 对 setCustomValidity() 的影响，也不会在验证失败时展示它。

常见误区：给 input 加 title="请输入邮箱"，以为能替代错误文案 → 实际无效
真正起作用的是 setCustomValidity() 设置的字符串，以及元素当前是否处于 :invalid 状态
title 仅用于无障碍提示或悬停浮层，和验证逻辑无绑定

如何让错误提示在失焦时出现（非提交时）

原生行为默认只在提交时批量校验，要实现“输完就提示”，得监听 blur 并手动触发校验。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

const input = document.querySelector('input[type="email"]');
input.addEventListener('blur', () => {
  if (!input.checkValidity()) {
    input.setCustomValidity('邮箱格式不正确');
    input.reportValidity(); // 关键：主动触发显示
  } else {
    input.setCustomValidity(''); // 清除错误状态
  }
});