HTML原生required属性仅在表单提交时校验，不处理空格、换行符等，且需禁用占位选项；适合基础防护，复杂场景须JS补充trim、正则及自定义提示。

HTML 原生 required 属性就能完成基础必填验证，无需 JS 就能触发浏览器默认提示，但它的行为和兼容性有明确边界，别指望它覆盖所有业务场景。

为什么 required 有时不生效

常见原因不是写错了，而是没满足触发条件：

• required 只在表单提交（submit 事件）时校验，对 input 实时输入、失焦（blur）或按钮点击无反应
• 空格字符串（" "）会被 required 当作非空——它只检测是否为“未填写”，不 trim 空格
• <select></select> 必须有一个 value="" 的禁用占位选项（如 <option value="" disabled selected>请选择</option>），否则首次选中任意项都会绕过校验
• <textarea></textarea> 中仅换行符（\n）或制表符也会被判定为“已填写”

required 和 JS 手动校验的分工建议

原生 required 适合做第一道防线，但不能替代 JS 校验：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 保留 required：保证无 JS 环境（如部分邮件客户端内嵌表单）或用户禁用 JS 时仍有基础防护
• JS 补充 trim 和正则校验：比如 input.value.trim() === "" 替代原生判断，避免空格蒙混过关
• 不要监听 blur 后调用 checkValidity() 并立刻报错——这会打断用户填写节奏；建议只在 submit 时统一处理，或用 reportValidity() 触发原生提示
• 若需自定义错误文案，必须用 setCustomValidity()，且每次输入后要清空（setCustomValidity("")），否则后续校验会被阻断

React/Vue 等框架里 required 还管用吗

管用，但容易被受控组件逻辑覆盖：

• React 中如果 value 绑定的是 undefined 或 null，required 会失效（浏览器认为该字段“未参与表单”）；确保初始值是空字符串 ""
• Vue 中 v-model 对 <select></select> 的绑定值类型要和 option 的 value 一致（字符串 vs 数字），否则 required 可能误判
• 框架内禁用原生校验（如 onInvalid 阻止默认行为 + 自定义弹窗）很常见，此时 required 仅作为语义标记存在，实际逻辑全靠 JS 控制

真正麻烦的不是加 required，而是当设计要求“失焦即提示”“空格算无效”“下拉框未选中时显示红边”——这些都得自己用 JS 补齐，原生属性只负责最简路径。