HTML表单原生验证需合理搭配属性：required与语义化type（如email、tel、number）配合使用，pattern须配title提示，minlength/maxlength/min/max等影响校验时机与反馈，理解各属性生效时机和浏览器行为咬合是关键。
HTML 表单基础验证完全不需要写 JavaScript，靠原生属性就能拦住绝大多数低级错误。关键不是“能不能做”，而是“哪些属性该用在什么字段上”。
required 和 type="email" 这类语义化类型必须配对使用
单独写 required 只能防空，但防不住用户填 “abc” 当邮箱；而只写 type="email" 不加 required，用户留空也能提交。两者配合才是最小有效验证单元。
-
type="email"触发浏览器内置邮箱格式校验（如必须含 @、不能以 @ 结尾） -
type="tel"不做格式强制，但会唤起移动端数字键盘，配合pattern才真正有用 -
type="number"会阻止非数字字符输入，但注意：它允许粘贴字符串、也接受空值——所以仍需required - 别用
type="text"冒充其他类型，比如把手机号写成type="text" pattern="^1[3-9]\d{9}$"，不如直接type="tel" pattern="^1[3-9]\d{9}$"，语义更清、体验更好
pattern 正则必须配合 title 才有实际提示效果
只写 pattern，浏览器校验失败时可能只弹一个模糊的“请与所要求的格式匹配”，用户根本不知道要填什么。加上 title，错误气泡里才会显示你写的提示文字。
-
pattern="[0-9]{6}" title="请输入6位数字邮政编码"—— 用户看到的是“请输入6位数字邮政编码”，不是“请与所要求的格式匹配” - 正则中不要用
^和$开头结尾（HTML5 pattern 默认全匹配），写成pattern="[0-9]{6}"就够了，pattern="^[0-9]{6}$"是冗余的 - 密码强度常用写法：
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}" title="密码需含大小写字母和数字，至少8位" - 移动端 Safari 对某些复杂正则支持不稳定，简单字面量优先（如
[a-zA-Z0-9_]{3,20}比带断言的更稳妥）
minlength / maxlength 和 min / max 的边界行为容易被忽略
这些属性不只是“限制长度”或“限制数值”，它们直接影响表单的 checkValidity() 返回值，也影响用户能否触发原生错误提示。
立即学习“前端免费学习笔记（深入）”；
-
minlength="3"对空值无效——用户不输任何内容，不会报错；只有输了一两个字符才触发。真要防空，还得靠required -
maxlength="10"是硬截断：用户粘贴超长文本，超出部分会被自动丢弃，但字段本身不会标红或报错，除非再失焦或提交 -
min="18" max="100"对type="number"有效，但对type="text"完全无效；且注意：它们只校验数字值，不校验字符串是否可转为数字（比如填 “18.5” 在某些浏览器里会通过） - 日期类控件如
type="date"也支持min和max，值格式必须是YYYY-MM-DD，例如min="2026-09-21"
真正难的不是写对某一个属性，而是理解每个属性在什么时机生效、失败时如何反馈、以及它和浏览器默认行为怎么咬合。比如 required 在 submit 时才校验，而 pattern 在 submit 和手动调用 checkValidity() 时才触发——这些细节不踩一遍坑，很难调得稳。
