直接用 validity 属性检测错误类型更可靠语义化，它提供8个布尔子属性（如valueMissing、typeMismatch等）并行标记失败规则，需调用checkValidity()更新状态，validationMessage可直接获取浏览器原生提示。
直接用 validity 属性做错误类型检测，比手写一堆正则判断更可靠、更语义化，也更贴合用户实际输入行为。关键不是“替代正则”，而是用浏览器原生验证状态代替你去猜——它已经帮你把“为什么错”分门别类算好了，你只需读取对应字段。
validity 对象本身就能覆盖绝大多数校验场景
每个表单控件（<input>、<select></select>、<textarea></textarea>）都有 .validity 属性，返回一个 ValidityState 对象，含 8 个布尔子属性。它们不是互斥开关，而是并行标记当前输入触发了哪些规则失败：
-
valueMissing：带
required却为空（包括未选<select></select>、未填type="date"） -
typeMismatch：格式硬性不匹配，如
type="email"输了abc，type="url"没写协议头 -
patternMismatch：仅当值非空且不满足
pattern正则时为true（空值不会触发此项） -
tooLong / tooShort：分别对应
maxlength和minlength超限（注意：maxlength在多数浏览器中会直接截断输入，所以tooLong实际较少见） -
rangeUnderflow / rangeOverflow：数值或日期超出
min/max（type="number"实时生效，type="date"仅在提交或调用checkValidity()时校验） -
stepMismatch：如
type="number" step="0.5"却输入1.2 -
badInput：完全无法解析的输入，比如
type="number"里输abc123（纯字母或混杂不可转数字内容） -
customError：仅表示
setCustomValidity(str)被调用且str !== ""，不代表其他规则失效
必须配合 checkValidity() 才能拿到真实状态
刚加载页面时，哪怕 required 输入框是空的，input.validity.valid 也可能为 true——因为浏览器默认不主动验证未交互过的字段。正确做法是：
- 监听
input或blur事件，在回调里先调用input.checkValidity() - 该方法会强制触发验证逻辑，并同步更新
validity各字段值 - 之后再读
input.validity.valueMissing或input.validity.patternMismatch就是准确的
用 validationMessage 获取浏览器原生提示语，省去手动翻译
input.validationMessage 不是固定字符串，而是浏览器根据当前首个为 true 的 validity 属性动态生成的提示文本：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
valueMissing === true→ 返回 “请填写此字段”（中文 Chrome） -
typeMismatch === true && type="email"→ 返回 “请输入有效的电子邮件地址” -
patternMismatch === true→ 返回 “输入不符合指定格式”（具体文案因浏览器而异）
这个值可直接用于 UI 提示，无需自己维护多语言映射表，也避免了正则失败后还要查是哪条分支没命中。
避开 customError 的常见陷阱
很多人误以为 customError === true 就代表“只有自定义错误”，其实它可能和 valueMissing 同时为 true。正确用法是：
- 每次输入后，先清空自定义错误：
input.setCustomValidity("") - 再根据
validity状态决定是否重设：if (input.validity.valueMissing) input.setCustomValidity("用户名不能为空") - 不要只靠
customError判断整体错误类型——它只是你手动设置的开关，不是校验结果本身
