required校验失效因绕过原生提交流程；动态input需挂载dom后设required；autocomplete须设在input且用标准token；表单结构错误（如嵌套、自闭合）会导致控件脱离上下文。
required 属性点击提交没反应？先看是否绕过了原生校验
浏览器只在**原生表单提交流程**中触发 required 校验，任何提前干预都会让它静默失效。常见干扰点包括：
- 给提交按钮加了
onClick={handleSubmit}，同时又写了<form onsubmit="{handleSubmit}"></form>—— 点击按钮直接执行 JS，跳过校验 - 在
form.addEventListener('submit', e => { e.preventDefault(); ... })里调用了preventDefault()，等于主动关掉了整个验证链 - 用
form.submit()手动触发表单提交，这属于“非交互式提交”，不触发约束验证 API
修复很简单：移除按钮上的 onClick，确保仅靠 type="submit" 和 onSubmit 驱动流程；若必须用 JS 控制，改用 form.checkValidity() 判断，失败时调用 form.reportValidity() 唤起提示。
动态插入的 input required 不生效？检查 isConnected 和渲染时机
用 document.createElement('input') 创建后直接设 required，但没挂到 DOM 上，浏览器压根不认——此时 input.isConnected 是 false，所有表单约束（required、minlength、type="email"）全部被跳过，控制台还会报 "Form submission canceled because the form is not connected"。
- 必须先将元素 append 到一个已存在于文档中的父容器（比如
document.getElementById('form-container')），再设置属性 - React/Vue 中，确保
required是在组件挂载后、DOM 真实渲染完成时设置，而非仅在 JSX 或模板里声明 - 不要依赖
setTimeout等模糊时机，可用MutationObserver或框架提供的生命周期钩子确认插入完成
autocomplete="off" 还是被填密码？别设在 form 上，去管每个 input
form autocomplete="off" 在 Chrome 76+、Edge 90+、Firefox 90+ 中已被弃用，它只是个默认值，不是开关。真正起作用的是每个 <input> 的 autocomplete 值，且必须匹配 WHATWG 规范定义的标准 token。
- 登录页密码框必须设
autocomplete="current-password"，不是"password"或"off" - 注册/改密页两个密码框都要设
autocomplete="new-password" - 所有字段必须有非空
name或id，空值或随机名（如name="field_abc123"）会让浏览器无法归因 - 避免敏感命名：字段名含
pass、pw、cvv等词，反而会强化自动填充逻辑
用 DevTools Elements 面板直接检查渲染后的 <input> 属性，JS 可能覆盖初始值，源码里写的不算数。
按钮点不动或提交无反应？先查 DOM 结构是否合法
最隐蔽也最致命的问题：HTML 结构错误导致表单上下文丢失。浏览器解析器对 <form></form> 标签极其严格，一点嵌套或自闭合就让整个表单“断连”。
- 嵌套
<form></form>：外层<form></form>遇到第一个就终止，后续所有控件（包括 submit 按钮）都游离在外 - 模态框里误写空
<form></form>：这个自闭合标签会提前收束，导致视觉上在 modal 内的字段实际不在任何表单内 - submit 按钮不在
<form></form>开闭标签之间：哪怕缩进看起来对齐，只要 DOM 树里不在其子节点，就无效
打开 DevTools Elements 面板，逐级展开确认按钮是否真实嵌套在 <form></form> 下；console.log(form.elements.length) 返回 0 就基本坐实结构崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
