原生html表单校验是应优先使用的首道防线，依赖required、type="email"、pattern等属性在现代浏览器中开箱即用；其生效需满足嵌套form内、避免display:none隐藏、正确使用title提示、注意pattern锚定及type="number"的step/min/max配置，并配合checkvalidity()等api精准控制校验时机。
原生 HTML 表单校验不是“够用就行”的备选方案，而是你应该优先写、优先信任的第一道防线——只要浏览器支持（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+），required、type="email"、pattern 就能立刻生效，不需要引入任何 JS。
为什么 required 有时不报错？
常见现象：加了 required 却没提示、表单照样提交成功。
- 表单外的
input不受约束——必须嵌套在<form></form>内，且不能被display: none或hidden属性隐藏（可用visibility: hidden或opacity: 0替代） -
type="hidden"忽略required—— 它天生就不该由用户填写 - 用户手动清空后又快速填入空格，
value.trim() === ""但浏览器未触发校验——此时需监听input事件 + 主动调用checkValidity() - 表单有多个
<button type="submit"></button>，但其中一个是formnovalidate—— 它会绕过所有校验，务必检查是否误加
pattern 正则匹配失败的三个坑
你写了 pattern="[0-9]{6}"，但输入 "123456" 还是报错？
- 正则默认**全字符串匹配**，不是“包含”。浏览器内部等价于
^pattern$，所以[0-9]{6}是对的；但若写成\d{6}，部分老版本 Safari 可能不识别\d，坚持用[0-9] -
title属性不是可选的——它是pattern失败时唯一显示的提示文字，缺了就只弹默认英文 “Please match the requested format” - 中文输入法下按空格或回车可能触发非预期的 input 值（如带零宽字符），建议在
blur时用value = value.trim()清理，再调用reportValidity()
如何让 type="number" 接受负数和小数？
默认 type="number" 允许负号和小数点，但校验行为容易误判：
- 输入
-或.中途状态会被认为 invalid —— 这是正常行为，别急着报错；应监听input而非change，并在blur时才校验最终值 - 要支持小数，必须显式加
step="any"，否则默认step="1"会拒绝3.14 - 要允许负数，确保没设
min="0"；若需限制范围，用min="-100"+max="100"+step="any" - 注意：
valueAsNumber在非法值时返回NaN，别直接参与计算，先!isNaN(input.valueAsNumber)判断
真正难的不是写对某一个属性，而是理解浏览器什么时候触发校验、什么时候静默忽略、以及如何用 checkValidity()、reportValidity() 和 setCustomValidity() 把控制权拿回来——这些 API 才是衔接原生能力与业务逻辑的关键接口，而不是一上来就用 JS 重写整套校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
