required属性未生效最常见的原因是表单提交方式错误或写在非表单控件上，仅对<input>、<select>、<textarea>有效，且须通过type="submit"按钮或回车触发原生提交才校验。
required 属性为什么没生效？
最常见的原因是表单提交方式不对，或者 required 写在了非表单控件上。它只对 <input>、<select>、<textarea> 生效，且必须在用户点击 <button type="submit"> 或按回车触发原生表单提交时才校验。
- 检查是否漏写了
type="submit"—— 普通<button>不会触发表单校验 -
required对type="hidden"、type="button"无效，哪怕加了也无反应 - 如果用 JavaScript 调用
form.submit()，浏览器不会执行原生校验，需手动调用form.checkValidity()
如何让必填提示更友好？
浏览器默认的英文提示（如 “Please fill out this field”）无法自定义，但可以通过 :valid / :invalid 伪类 + title 属性做轻量优化：
<input required title="此项为必填项" placeholder="请输入姓名">
-
title在聚焦时会显示为 tooltip，部分浏览器会在校验失败时优先展示它 - 用 CSS 控制
input:invalid:not(:placeholder-shown)可高亮错误状态，避免用户还没输入就红框干扰 - 不要依赖
oninvalid事件覆盖提示——它只在首次校验失败时触发，且不能阻止默认弹窗
required 和后端校验的关系
required 是纯前端体验增强，和安全无关。用户禁用 JS、用 curl 提交、或绕过 HTML 直接发请求，都能跳过它。
- 后端必须重新校验所有标记为必填的字段，不能信任任何前端传来的数据
- 前后端校验规则要一致：比如前端
required的<input type="email">，后端也要用相同正则或库做邮箱格式验证 - 若后端返回校验失败，应把错误信息映射回对应字段，而不是只显示“表单不合法”这种模糊提示
移动端键盘与 required 的兼容细节
在 iOS Safari 上，required 输入框聚焦时可能不自动唤起键盘，尤其当它被包裹在 display: none 或未渲染完成的容器中。
立即学习“前端免费学习笔记（深入）”；
- 确保元素已渲染且
tabindex="0"可聚焦（某些框架动态插入的 input 容易出这个问题） - 避免对
required字段设置autocomplete="off"—— iOS 会因此抑制键盘弹出 - Android Chrome 对
required支持稳定，但若字段有pattern，需注意正则语法兼容性（如不支持 lookbehind）
