minlength和maxlength仅对text、search、url、tel、email、password及textarea有效，对number、date、checkbox等类型无效；必须配合required才能使minlength拦截空值，且后端必须重复校验。
minlength 和 maxlength 只对特定 type 有效
给 input 加 minlength 或 maxlength 前，先确认它的 type 是否支持：只对 text、search、url、tel、email、password 和 textarea 生效。其他如 number、date、checkbox 完全忽略该属性——浏览器不报错，也不校验，只是静默失效。
常见错误写法：<input type="number" minlength="3">。这种写法在提交时不会触发长度检查，必须改用 JavaScript 判断 value.toString().length 或后端兜底。
-
minlength必须配合required才能拦截空值（否则空字符串长度为 0，但不满足required才报错） - Firefox 57+、Chrome/Edge 全支持；Safari 直到 v16.4 才完整支持，旧版 Safari 会直接忽略
- 移动端软键盘点击“完成”或“搜索”按钮时，部分 Android 浏览器可能不触发校验，建议额外监听
blur
pattern 属性必须配正则和 title 才实用
pattern 是唯一能用正则表达式做格式约束的原生属性，但它本身不提供提示文案。浏览器默认错误信息是“请与所要求的格式匹配”，用户根本不知道要填什么。
必须搭配 title 属性，例如：<input pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="请输入 xxx-xxx-xxxx 格式的电话号码">。注意：title 不是万能提示框——它只在鼠标悬停时显示，移动端基本不可见，真正起作用的是 setCustomValidity() 的 JS 调用。
-
pattern在submit或checkValidity()时才校验，不实时响应 - 正则中不要加
^和$，浏览器会自动锚定整个输入值（即等价于^pattern$） - 中文输入法组合过程中（如“你好”未上屏），
input.value可能为空或不完整，JS 补充校验时建议监听compositionend防误判
type="email" 和 type="url" 的校验边界很窄
type="email" 只检查是否含 @ 和至少一个 .（如 a@b.c 就算通过），并不验证域名是否存在，也不拒绝 user@localhost 这类本地地址；type="url" 强制要求协议头（https:// 或 http://），example.com 会被判无效。
所以不能靠 type 替代业务规则。比如注册邮箱，前端用 type="email" 拦住明显非法格式即可，真实存在性必须由后端发验证码或查 MX 记录来确认。
-
type="number"会阻止键盘输入字母，但允许粘贴"123abc"—— 粘贴后value是字符串"123abc"，checkValidity()返回false，但你得自己处理这个状态 -
type="date"的值永远是YYYY-MM-DD格式，不接受MM/DD/YYYY，且 IE 完全不支持 - 所有
type校验都发生在提交瞬间，无法替代实时反馈，复杂场景仍需 JS
自定义错误提示必须用 setCustomValidity()，且要清空
浏览器原生提示文案无法修改，想显示“密码需包含数字和字母”，只能用 JavaScript 调 input.setCustomValidity("密码需包含数字和字母")。但这个方法不是“设置提示”，而是“设置校验失败状态”：传非空字符串 = 失败，传空字符串 "" = 通过。
最容易踩的坑是忘记清空。比如密码框校验两次输入是否一致，第一次不一致设了错误，第二次一致了却没调 setCustomValidity("")，那它永远卡在失败态，表单无法提交。
- 必须在
input或blur事件里调用，不能只等submit时集中处理 - 多个条件共存时（如长度 + 字符类型），每次都要重新计算并调一次
setCustomValidity() - 调完后可立即调
input.checkValidity()查看当前状态，方便调试
minlength、pattern、setCustomValidity() 全部失效于禁用 JS、删 DOM、curl 提交——后端必须用相同逻辑重复校验，且返回的错误字段名要和前端一致，才能让错误信息精准回填。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
