HTML5 required属性可触发浏览器原生必填校验并阻止提交，但提示文案不可直接修改；需结合title属性（部分浏览器支持）或setCustomValidity()方法实现自定义提示，且须注意空格处理与跨浏览器兼容性。

HTML5 的 required 属性能直接触发浏览器原生必填校验，无需 JavaScript 就可阻止表单提交，并显示默认提示（如“请填写此字段”）。但它的提示文案不可直接通过 HTML 修改，需结合 setCustomValidity() 和 title 属性或事件干预才能实现自定义提示。

使用 required 属性启用基础必填验证

在 input、select、textarea 等表单控件上添加 required 属性，浏览器会在提交时自动检查是否为空值（空字符串、未选 option、未勾选 checkbox 等）：

• <input type="text" name="username" required>
• <select name="country" required><option value="">请选择</option></select>
• <textarea name="message" required></textarea>

注意：空格、换行符会被视为有效输入，若需严格非空白校验，应配合 pattern 或 JS 进一步处理。

用 title 属性临时覆盖部分浏览器的提示文案

某些浏览器（如 Chrome、Edge）在表单元素聚焦且验证失败时，会将 title 属性内容作为气泡提示显示。这是一种轻量级兼容方案：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• <input type="email" name="email" required title="请输入有效的邮箱地址">
• 该方式不改变验证逻辑，仅影响提示文字；Firefox 不支持此行为，Safari 表现不稳定。

用 setCustomValidity() 实现完全可控的自定义提示

通过 JavaScript 调用 setCustomValidity() 可覆盖默认验证状态和提示信息。关键在于：传入非空字符串表示验证失败并设提示，传入空字符串表示验证通过：

• 在 input 或 blur 事件中检查值，再调用 setCustomValidity：

• const nameInput = document.querySelector('input[name="username"]');
  nameInput.addEventListener('blur', () => {
    if (!nameInput.value.trim()) {
      nameInput.setCustomValidity('用户名不能为空，且不能只有空格');
    } else {
      nameInput.setCustomValidity(''); // 清除错误状态
    }
  });

• 必须在表单提交前（如 submit 事件）再次调用，否则可能因缓存导致提示不更新。

统一处理多个字段并增强用户体验

避免每个字段单独写逻辑，可用通用函数绑定验证规则：

• 为必填字段添加 data-required-msg 自定义属性，例如：<input required data-required-msg="此项为必填项">
• 监听表单的 submit 事件，在提交前遍历所有 [required] 字段，统一调用 setCustomValidity 并设置对应提示。
• 配合 :invalid CSS 伪类高亮错误字段，提升视觉反馈，例如：input:invalid { border-color: #e53e3e; }