required属性仅在原生表单提交时生效，对input、select、textarea有效，而对div、自定义组件、type="hidden/button"等无效；空格字符串视为已填写；JavaScript调用form.submit()会跳过验证；服务端必须二次校验。
required 属性为什么没生效
表单提交时绕过验证，通常是因为 required 被加在了错误的元素上——它只对 <input>、<textarea>、<select> 有效，对 <div> 或自定义组件无效。另外，如果表单里有多个 <button>，且其中一个是 type="button"（非提交按钮），用户点它就不会触发验证。
实操建议：
-
required必须直接写在可提交控件上，例如：<input type="email" required> - 确保提交动作由
type="submit"触发，或显式调用form.reportValidity() - 注意：空格字符串（如用户只敲空格）会被视为“已填写”，
required不拦截；需配合pattern或 JS 进一步校验
type="email" 和 pattern 的区别在哪
type="email" 是语义化 + 基础格式检查（必须含 @），但不保证域名真实存在；pattern 是正则驱动的更细粒度控制，比如限制邮箱域名只能是 @example.com。两者可共存，浏览器会先走 type 校验，再走 pattern。
常见误区：
立即学习“前端免费学习笔记（深入）”；
-
type="number"允许输入e、+、-等符号，不是严格数字；真正要限制整数，得加pattern="\d+"和inputmode="numeric" -
pattern默认是“全匹配”，正则必须覆盖整个输入值，例如pattern="[a-z]{3,}"表示至少 3 个小写字母，不能写成[a-z]+ - 移动端软键盘会因
type变化（type="tel"弹数字键盘），但pattern不影响键盘类型
valid 和 invalid 伪类样式为什么不更新
浏览器只在用户交互（如输入、失焦、提交）后更新 :valid/:invalid 状态，不会实时监听 JS 修改的 value。比如用 JS 清空输入框，样式不会自动变回 :invalid，除非触发 input 或 blur 事件。
实操要点：
- 修改
value后，手动触发事件：inputEl.value = ''; inputEl.dispatchEvent(new Event('input', { bubbles: true })); -
:invalid在表单初始加载时可能不生效——浏览器默认不校验未交互过的字段，首次提交才会激活 - 不要依赖
:valid做关键逻辑判断，它只是 UI 状态；业务逻辑仍需调用checkValidity()或读取validity.valid
setCustomValidity() 怎么避免覆盖原生错误提示
调用 setCustomValidity("xxx") 后，原生校验（如 required、type="email"）的错误消息会被完全替换。一旦设为空字符串 setCustomValidity("")，才恢复原生提示。
安全用法：
- 仅在需要补充业务规则时使用，比如“用户名已被占用”，而不是替代
required - 每次校验前先清空：
el.setCustomValidity("")，再根据条件重新设置 - 不要在
input事件里频繁调用，会导致提示闪烁；更适合放在blur或表单submit时统一校验
原生验证看着简单，但 required、type、pattern、setCustomValidity() 四者触发时机和优先级不同，混用时容易互相掩盖问题。最常被忽略的是：表单提交前浏览器是否真的执行了所有校验，以及 JS 修改值后状态是否同步更新。
