html表单默认值不参与校验，校验仅基于控件当前dom状态是否满足约束；form.reset()恢复的是html初始属性值，非js设置值；确保默认值通过校验需html与js层值一致且格式正确。
HTML 表单默认值本身不参与有效性校验——浏览器只在校验触发时（如提交或调用 checkValidity()）检查当前控件的 value、checked 或 selected 状态，而不会“回溯”你最初怎么设的默认值。真正影响校验结果的，是控件**当前 DOM 状态是否满足 required/min/max/pattern 等约束**，和这个值“是不是默认的”毫无关系。
为什么表单重置后默认值失效、校验变红？
这是最常被误解的一点：你以为设了 value="admin" 就万事大吉，但一按重置按钮，输入框变空、下拉框跳回第一个选项，甚至直接报错“请填写此字段”。根本原因不是默认值丢了，而是：
-
form.reset()会把所有控件恢复到**HTML 解析时的初始属性值**——也就是你写在标签上的value、selected、checked，而不是 JS 后续赋的值 - 如果你没写
value属性（比如<input type="text">），那初始值就是空字符串，reset()后自然为空，required就立刻失败 -
<select></select>没显式标selected的<option></option>，浏览器按文档顺序选第一个；但如果你 JS 初始化时绑的是'user'，而第一个<option value="admin"></option>被默认选中，reset()后就变成'admin'，和你的 JS 状态对不上
如何让默认值通过 required / pattern 校验？
关键不是“设默认值”，而是“确保默认值天然满足所有验证规则”。这需要同时满足 HTML 层和 JS 层的一致性：
- 对
<input type="text">：必须带value="xxx"属性，且该值不能为空（若需required），也不能违反pattern或minlength - 对
<select></select>：必须在某个<option></option>上写selected，且该option的value必须和 JS 绑定变量的初始值完全一致（类型+值，'1'≠1） - 对
<input type="date">：value必须是YYYY-MM-DD格式字符串，比如value="2026-09-22"；写成"22/09/2026"会被浏览器无视，控件显示为空，required立刻失败 - 对
<input type="number">：value必须是数字字符串（如"42"），不能是"42px"或空格包裹的" 42 "，否则解析失败，值为空字符串
异步加载默认值时的校验陷阱
编辑页常见场景：接口返回数据后才填表单，但用户可能在数据回来前就点了提交——此时所有字段还是初始空值，required 全挂。解决办法不是等数据，而是控制渲染时机：
- 用
v-if="options.length > 0"（Vue）或*ngIf="data"（Angular）延迟渲染整个<select></select>，避免空options下绑定v-model导致默认值错乱 - React 中不要在
useEffect里 set state 后立刻调用form.checkValidity()——DOM 还没更新，得用setTimeout(() => form.checkValidity(), 0)或useLayoutEffect - 原生 JS 场景下，数据加载完成、填完所有
input.value和select.value后，手动触发一次form.reportValidity()，让浏览器立即刷新校验状态
最易被忽略的点：type="date"/"number"/"email" 的 value 格式错一位（比如少个横杠、多一个空格），浏览器就当它不存在，控件内部值为空字符串，此时哪怕你 JS 里 console.log(input.value) 看着有值，实际校验也通不过。校验永远看的是浏览器 DOM 内部的真实状态，不是你 JS 变量里存的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
