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 属性内容作为气泡提示显示。这是一种轻量级兼容方案：
<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并设置对应提示。 - 配合
:invalidCSS 伪类高亮错误字段，提升视觉反馈，例如：input:invalid { border-color: #e53e3e; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
