HTML表单原生验证默认启用，需正确使用required、type等属性并用type="submit"按钮或requestSubmit()触发；自定义组件无效，type属性仅做基础校验，提示文案须用setCustomValidity()，validity状态需结合用户交互判断。
HTML表单验证靠浏览器原生支持，不用写JS也能生效
只要表单控件带了 required、type="email"、min/max 这类属性，现代浏览器（Chrome/Firefox/Safari/Edge）就会自动触发验证逻辑——不是“开启”而是“默认就开着”，关键在你有没有用对属性。
常见错误现象：submit 事件照样触发、没弹红框提示、输入错误却能提交成功。根本原因往往是：表单里混用了 button 而非 type="submit"，或者 JS 里调了 form.submit() 绕过了原生检查。
- 必须用
<button type="submit">或<input type="submit">触发提交，否则不走验证流程 -
form.submit()是纯 JS 提交，完全跳过 HTML 验证；要用form.requestSubmit()替代（兼容性注意） - 所有验证属性只对
<input>、<select>、<textarea>有效，自定义组件（如<my-input>）不参与
type 属性决定校验规则，但 type="text" 不校验格式
type 是最常被误用的点：很多人以为设了 type="email" 就万事大吉，其实它只做基础格式检查（比如必须含 @），并不保证邮箱真实存在；而 type="number" 会拒绝输入字母，但允许粘贴非法字符串（如 "123abc"）。
容易踩的坑：type="number" 在移动端唤起数字键盘是优点，但它的 value 始终是字符串，且空值时返回空字符串而非 null 或 undefined，后续 JS 处理要小心类型转换。
立即学习“前端免费学习笔记（深入）”；
-
type="email"允许user@localhost这种本地域，不等价于 RFC 标准 -
type="url"要求协议头（https://），example.com会被判无效 -
type="date"的格式固定为YYYY-MM-DD，不接受MM/DD/YYYY，且 IE 完全不支持
自定义提示文案得用 setCustomValidity()，title 属性无效
浏览器默认提示（如“请填写此字段”）没法改，想换中文或更具体的说明，不能靠 title 或 placeholder，必须用 JS 调 setCustomValidity()。
注意：这个方法不是“设置提示语”，而是“设置校验失败状态”。传空字符串 "" 表示通过，传非空字符串才表示失败并显示该文本。
- 必须在
input或change事件里调用，不能只在submit时集中处理 - 如果多个条件要校验（比如密码长度 + 是否含数字），每次都要重新调用，否则旧错误会残留
- 调用后记得手动触发
checkValidity()或让浏览器在提交时自动触发
validity API 查状态比正则更可靠，但别直接读 validity.valid
判断一个字段是否通过验证，别用 input.validity.valid 做条件分支——它在用户还没输任何内容时就是 true（未触发表单验证），容易导致逻辑错乱。
真正稳妥的做法是：监听 input 之后再查，或统一在 submit 事件里用 form.checkValidity() 批量判断。单独字段可用 input.validity.valid || input.value === "" 来区分“未填”和“填错”。
-
input.validity.valueMissing对应required未填 -
input.validity.typeMismatch对应type="email"格式不对 -
input.validity.tooShort只在设置了minLength且浏览器支持时才有值（Safari 旧版不支持）
原生验证看着简单，但每个属性背后都有浏览器实现差异和触发时机陷阱。最常被忽略的是：验证只在用户交互后才激活，静默状态下 validity 状态不可信，别拿它做初始化判断。
