HTML无原生组件级校验，需用input/form约束属性+JS模拟：required/pattern等触发浏览器校验，但仅提交时生效；实时校验需监听input事件并调用checkValidity()，配合防抖、状态同步与函数封装实现复用。
HTML 本身不提供“组件级别”的数据校验器——它没有组件模型，也没有运行时校验逻辑。所谓“HTML 实现”，实际是指用原生 <input>、<form> 的约束属性 + JavaScript 补充控制，模拟出接近组件化校验的行为。
用 required、pattern、min/max 做声明式基础校验
这些属性触发浏览器内置验证，但仅限表单控件，且只在提交或调用 checkValidity() 时生效。它们不是“组件级”的，但可作为第一道防线。
-
required对空值有效，但对空格字符串（" "）不报错，需配合trim()或pattern=".+" -
pattern使用正则，注意它默认是“全匹配”（隐式加 ^ 和 $），写pattern="[0-9]+"就够了，不用写^[0-9]+$ -
type="email"只校验格式，不发请求验证邮箱真实存在；type="url"同理，且会拒绝不含协议的example.com - 错误提示文案由浏览器决定，无法统一定制；
setCustomValidity()可覆盖，但必须显式调用reportValidity()才显示
用 addEventListener("input") 实现实时反馈
真正接近“组件级”体验的关键：把校验逻辑绑定到单个输入元素上，而不是等整个表单提交。
- 监听
input（不是change）才能捕获实时输入，包括粘贴、自动填充 - 每次触发都应调用
element.checkValidity()，再根据结果操作element.classList或旁路<span class="error"> - 避免在
input中直接setCustomValidity()，否则会干扰原生校验状态；推荐统一用validity.valid判断，再手动管理错误消息 - 注意防抖：高频输入下频繁校验可能卡顿，简单场景用
setTimeout+clearTimeout控制即可
封装成可复用的校验函数（非框架，纯 JS）
没有框架时，“组件级”靠函数封装实现复用。核心是把校验规则、DOM 元素、反馈方式解耦。
立即学习“前端免费学习笔记（深入）”；
- 函数接收
inputEl、rules（如{ required: true, pattern: /^\d+$/, message: "请输入数字" }）、feedbackEl（错误提示容器） - 规则执行顺序很重要：先必填，再格式，再自定义函数（如异步校验手机号是否已注册）
- 异步校验（如用户名唯一性）不能阻塞输入，需标记
data-validating="true"，禁用提交按钮，并在 resolve 后再更新 UI - 不要把校验逻辑硬编码进 HTML：
data-validate="email,required"看似方便，但难以调试、无法传参、不支持复杂规则
真正的难点不在写校验逻辑，而在一致地管理状态同步：输入值变化、失焦、提交、重置、异步返回，这些时机都要对齐 DOM 状态和业务状态。很多人卡在“为什么刚输完就报错”或“改了值错误提示没消失”，其实只是没清掉上一次的 setCustomValidity() 或忘了重置 classList。
