required属性仅对text、email、number等可编辑input类型及select、textarea生效，提交时校验空值并阻止提交，提示文案和样式不可自定义，空格视为已填，不支持条件必填或失焦校验。
input 的 required 属性最常用但容易被忽略细节
空值校验靠 required 最直接，但它只检查用户是否输入了内容，不判断内容是否有效。比如邮箱输入框加了 required，用户填 abc 也能通过——因为非空就满足条件。
常见错误是以为加了 required 就等于“校验通过”，结果后端还得兜底。它只是前端第一道门槛，且仅对 text、email、number 等可编辑类型生效，对 hidden 或 button 无效。
- 必须配合表单提交触发（点击
<button type="submit">或回车），单独聚焦/失焦不会激活 - 浏览器默认提示文案不可自定义，不同浏览器显示位置和样式不一致（Chrome 在字段上方，Safari 在下方）
- JavaScript 中可通过
element.checkValidity()主动调用验证逻辑，比监听submit更灵活
type 属性决定校验规则而非仅美化输入框
type 不只是让键盘弹出数字或邮箱布局，它直接启用内置校验逻辑。比如 <input type="email"> 会检查是否含 @ 和域名结构，<input type="url"> 要求以 http:// 或 https:// 开头。
但要注意：这些校验非常宽松。例如 type="email" 接受 a@b.c，type="url" 接受 https://x——它们只做基础格式匹配，不是 RFC 合规校验。
立即学习“前端免费学习笔记（深入）”；
-
type="number"会阻止非数字字符输入（除e、+、-、小数点），但允许空值；加required才能禁止留空 -
type="date"在支持的浏览器中弹出日期选择器，且校验格式为YYYY-MM-DD；不支持时退化为普通文本框，此时无任何校验 - 自定义
type（如type="custom"）会被当作text处理，不触发任何特殊校验
pattern 属性适合简单正则校验但别过度依赖
pattern 允许写正则表达式做更细粒度控制，比如密码要求至少 8 位含大小写字母和数字：pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}"。但它只在提交时触发，且正则语法受限于 HTML 属性上下文——不能用标志（如 /i），必须写成纯字符串形式。
常见陷阱是忘记正则默认不锚定开头结尾，导致 pattern="d+" 会匹配 abc123def。正确写法是 pattern="^d+$"。
- 错误提示文案由浏览器生成，无法修改；若想自定义提示，需用
setCustomValidity() - 移动端软键盘行为不受
pattern影响，它只管提交校验，不改变输入体验 - 正则中反斜杠要双写：
pattern="^\d{6}$"表示“严格 6 位数字”，单个会被 HTML 解析丢弃
用 JavaScript 补足 HTML 原生校验的短板
原生校验解决不了动态场景：比如“确认密码”需实时比对另一字段，“手机号”需根据国家区号切换规则，“用户名”需异步查重。这时必须用 JS 监听事件并调用校验 API。
关键方法是 setCustomValidity()：传入空字符串表示校验通过，传入非空字符串则标记为失败并显示该文案。它会覆盖 required、pattern 等原生错误。
- 推荐在
input或blur事件中调用，避免每敲一个键都校验（影响性能） - 校验前先调用
element.setCustomValidity("")清除旧状态，否则错误会一直挂着 - 结合
:valid/:invalidCSS 伪类可做视觉反馈，但注意它们受checkValidity()结果影响，不一定实时更新
