html表单校验应分层处理：required用于非空校验，pattern配合title做格式提示，复杂业务规则（如地址长度、数量范围）须用js结合setcustomvalidity实现，并在提交时统一触发校验与焦点控制。
订单表单必填字段校验用 required 属性最直接
浏览器原生支持的 required 是处理「非空校验」最快的方式，它会阻止表单提交并自动聚焦到第一个未填字段，且无需 JS。但注意：它只检查值是否为空字符串，对空格、" " 或仅换行符不敏感。
实操建议：
- 所有带星号（*）的字段，如
<input name="name" required>、<select name="shipping_method" required></select> - 避免在
<textarea></textarea>上只加required就完事——用户可能只敲空格，应配合 JS 做.trim()判断 -
type="email"和type="tel"能触发基础格式提示，但不要依赖它们做最终校验，正则更可靠
手机号和邮箱格式校验用 pattern + title 提示用户
pattern 允许你写正则约束输入内容，配合 title 可以在悬停或验证失败时显示友好提示。它比纯 JS 校验轻量，且能与原生反馈机制（如 :valid/:invalid）联动。
实操建议：
- 手机号推荐用：
<input type="tel" pattern="[0-9]{11}" title="请输入11位数字手机号">（国内场景） - 邮箱用：
<input type="email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" title="邮箱格式不正确">（比原生type="email"更严格） - 注意：pattern 正则默认是全匹配（即隐含
^...$），不用额外加首尾锚点 - pattern 不会实时触发验证，只有提交或调用
checkValidity()时才生效
地址和商品数量这类业务规则必须用 JS 手动校验
比如「收货地址不能少于5个汉字」「商品数量必须是 1–999 的整数」「同一订单不能选超过3种优惠券」——这些逻辑无法用 HTML 属性表达，必须监听事件并调用 setCustomValidity() 干预原生验证流程。
实操建议：
- 监听
input或blur事件，而非仅靠提交时校验，提升用户体验 - 对中文地址长度判断用
text.replace(/[^\u4e00-\u9fa5]/g, "").length >= 5，避免把标点、空格算进去 - 数量输入框设置
type="number"后仍要校验：用户可通过粘贴、开发者工具绕过限制，所以需在submit事件里再 check 一遍 - 调用
inputEl.setCustomValidity("地址太短，请至少填写5个汉字")，传空字符串表示“通过”
提交前统一触发校验并聚焦首个错误项
即使每个字段都配了 required 或 pattern，用户点击提交后若多个字段报错，浏览器默认只聚焦第一个，其余错误提示可能被忽略。需要主动遍历 + 控制焦点。
实操建议：
- 在
form.addEventListener("submit", e => { ... })中，先e.preventDefault() - 用
form.checkValidity()触发全部原生校验，返回false表示有失败项 - 遍历
form.querySelectorAll("input, select, textarea")，找到第一个!el.checkValidity()的元素，调用el.focus() - 别忘了给自定义校验字段（如地址）也调用
el.reportValidity()，否则它们不会出现在视觉反馈中
"1.5"，提示「请输入整数」比「格式错误」有用；地址只打了「北京市」，提示「请补全到街道门牌号」比「地址太短」更明确。这些细节得靠业务理解，不是靠框架自动解决。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
