required 属性未生效是因为仅对可提交的表单控件（如text、email、select、textarea等）有效，不支持hidden、button、div等元素；且在框架受控组件、动态渲染或旧版safari中存在兼容性问题。
required 属性为什么没生效？检查表单控件类型
不是所有 HTML 元素都支持 required，它只对可填写、可提交的表单控件有效。常见支持的有：input（type="text"、"email"、"number"、"checkbox"、"radio"）、select、textarea。不支持的包括：input type="hidden"、input type="button"、div、span 等非表单控件。
容易踩的坑：
-
input type="file"虽然支持required，但部分旧版 Safari 不触发校验（iOS 15.4 之前） -
input type="checkbox"加了required后，必须勾选才通过；但若同时设了checked，默认已满足，失去“必填”意义 -
select必须至少有一个option没有selected属性，且其value为空字符串（如<option value="">请选择</option>），否则即使加了required也会被绕过
required 校验失败时浏览器怎么提示？
原生 required 触发的是 HTML5 表单约束验证（Constraint Validation API），失败时浏览器会自动聚焦到问题字段，并显示气泡提示（tooltip）。但提示文案不可直接配置，不同浏览器语言/系统设置下内容不同（例如 Chrome 中文环境显示“请填写此字段”，Edge 可能显示“此字段为必填项”）。
关键点：
- 提示只在用户尝试提交表单（
submit事件）或调用reportValidity()时触发，不会实时监听输入 - 如果表单用了
event.preventDefault()阻止默认提交，又没手动调用form.checkValidity()或reportValidity()，就不会看到任何提示 - 移动端 Safari 对
required的视觉反馈较弱，有时仅高亮边框，无气泡 —— 别误以为失效，其实是 UI 差异
required 和 JavaScript 校验冲突吗？
不冲突，但顺序和控制权要理清。required 是浏览器原生校验，在表单 submit 事件触发前自动执行。如果 JS 在 submit 处理函数中调用 event.preventDefault()，原生校验就不会展示提示（除非你手动调用 reportValidity()）。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
- 想保留原生提示 + 自定义逻辑？在
submit回调里先调用form.reportValidity()，返回true再继续你的 AJAX 提交 - 想完全接管校验？移除所有
required，用 JS 手动检查element.value或element.checked，并用setCustomValidity()控制错误状态 - 注意：
input type="number"的空值判断要小心 —— 用户删光数字后，value是空字符串，但valueAsNumber是NaN，required校验看的是value，不是valueAsNumber
required 在 Vue/React 里为什么经常失灵？
框架的受控组件（controlled component）可能覆盖原生行为。比如 React 中把 input 的 value 绑定到 state，但初始 state 是 null 或 undefined，会导致 DOM 中实际渲染出 value=""，而 required 对空字符串是有效的 —— 这本身没错，但开发者常误以为“绑定了就不用管 required”。真正的问题在于状态未同步或条件渲染漏掉字段。
典型场景：
- Vue 使用
v-model时，若绑定的 data 字段初始为undefined，required仍生效；但如果用v-if动态控制该input是否渲染，切换过程中 DOM 节点被销毁重建，required状态不会丢失，但焦点和校验时机可能错乱 - React 中用
useState('')初始化，没问题；但若写成useState(null)，JSX 渲染时<input value="{null}" required>会被转成value=""，仍符合校验逻辑 —— 失灵往往是因为后续逻辑清空了值却没重置表单状态 - 所有框架里，用
form.reset()可重置required的校验状态；但直接改 state 不会，得配合element.setCustomValidity('')或重新 focus 后 blur 来触发重检
浏览器对 required 的实现细节差异比想象中多，尤其是涉及动态渲染、自定义表单控件或 polyfill 时，别只盯着属性有没有加，得确认它是否真的挂载到了最终的 DOM 节点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
