type="email"和type="url"仅做基础语法校验：前者接受foo@bar，后者在chrome中接受example.com；强校验需pattern锚定（如^\d{11}$）或js补充，required只判空不验内容，原生验证仅submit触发。
type="email" 和 type="url" 的验证边界在哪
浏览器对 type="email" 和 type="url" 的校验非常基础，不能当作完整格式校验用。比如 foo@bar 会被 type="email" 接受（缺域名后缀），example.com 也会被 type="url" 接受（没协议头）。它们只做最低限度的语法检查，不验证 DNS 可达性或真实存在性。
实际使用时要注意：
-
type="email"不等价于邮箱正则校验，仅检查是否含@和至少一个点号（部分浏览器） -
type="url"在 Chrome 中接受无协议的example.com，Firefox 则更严格，要求http://或https://开头 - 移动端调起专用键盘是它们真正的价值点，验证只是附带功能
- 若需强校验（如确保是企业邮箱、带特定域名），必须配合
pattern或 JS 后续判断
pattern 属性必须加 ^ 和 $ 锚定
pattern 默认只做“子串匹配”，不是全字符串匹配。写成 pattern="[0-9]{11}" 会让 abc12345678901def 也通过——因为中间恰好有 11 位数字。
正确写法必须显式锚定：
- 手机号 11 位：用
pattern="^[0-9]{11}$" - 6 位邮政编码：用
pattern="^[0-9]{6}$" - 密码至少 8 位含大小写字母和数字：用
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$" - 不加
^和$就等于放弃控制权
required 不校验内容，只判空值
required 是布尔属性，只检查字段是否为空字符串、未选中（select）、未勾选（checkbox / radio），它完全不管内容是否合法。一个 required 的 input[type="number"] 填了 abc，依然算“已填写”，不会触发验证失败。
常见误用场景：
- 给
type="number"加required，却忘了设min/max，导致用户粘贴字母也能提交 -
select的第一个option值为空但没设disabled selected，用户没动下拉框就提交，required不拦截 -
textarea里全是空格，required认为有效（因非空字符串），需额外用 JS.trim()判断
验证只在 submit 时触发，blur/input 不自动生效
原生验证默认只在表单提交（submit 事件）时运行。用户填错邮箱、离开焦点（blur）、甚至按键（input）都不会弹提示——这是很多人以为“验证没起作用”的根本原因。
想实现即时反馈，必须手动调用：
-
input.checkValidity()：返回true/false，不显示提示 -
input.reportValidity()：触发浏览器默认气泡提示（注意 Firefox 不滚动到错误字段） - 推荐在
blur时调reportValidity()，在input时只调checkValidity()并更新 UI 状态（如红边框） - 自定义提示要先
setCustomValidity('错误文案')，清空提示用setCustomValidity('')
最易被忽略的是：所有这些方法都依赖 DOM 元素当前的 value 和约束属性状态；JS 直接赋值 input.value = 'xxx' 不会自动触发重校验，必须手动调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
