html5表单校验无原生错误码，开发者需基于validity布尔属性（如valuemissing、typemismatch等）自建映射表；通过validation_messages对象将属性名映射为中文提示，并支持占位符动态替换；在invalid事件或submit时遍历validity获取首个true键名作为逻辑错误码，查表渲染对应文案。
HTML5 原生表单校验本身不提供“错误码”概念，它只暴露 validity 对象中的一组布尔属性（如 valueMissing、typeMismatch、patternMismatch 等），每个代表一类验证失败原因。所谓“自定义错误码与文案的映射”，其实是开发者基于这些原生状态，自行建立语义化键名（即逻辑上的“错误码”）并绑定中文提示的实践方案。
明确 validity 中的关键状态字段
每个表单控件的 input.validity 是只读对象，包含以下常用判断属性：
-
valueMissing：必填但为空（对应
required） -
typeMismatch：类型不匹配（如
type="email"但输入了abc） -
patternMismatch：正则不匹配（
pattern属性触发） -
tooShort / tooLong：长度不足或超限（
minlength/maxlength） -
rangeUnderflow / rangeOverflow：数值/日期超出
min/max -
badInput：用户输入了无法解析的内容（如在
number框里输字母）
构建映射表：用对象字面量统一管理文案
把每个 validity 属性名当作“逻辑错误码”，映射到你想要的中文提示。推荐封装成常量对象，便于维护和复用：
const VALIDATION_MESSAGES = {
valueMissing: '此项为必填项',
typeMismatch: '格式不正确，请检查输入',
patternMismatch: '输入不符合要求，请参考提示',
tooShort: '输入太短，至少需要 {minLength} 个字符',
tooLong: '输入太长，最多允许 {maxLength} 个字符',
rangeUnderflow: '数值不能小于 {min}',
rangeOverflow: '数值不能大于 {max}',
badInput: '请输入有效内容'
};
注意：{minLength} 这类占位符可后续用正则替换，实现动态文案。
在 invalid 事件或提交时按需取值
监听 invalid 事件时，遍历 input.validity 找出第一个 true 的键，再查表获取文案：
emailInput.addEventListener('invalid', e => {
e.preventDefault();
const input = e.target;
const validity = input.validity;
// 查找首个失败项
const errorCode = Object.keys(validity).find(key =>
validity[key] === true && key in VALIDATION_MESSAGES
);
const message = errorCode
? VALIDATION_MESSAGES[errorCode]
.replace('{minLength}', input.minLength || '')
.replace('{maxLength}', input.maxLength || '')
.replace('{min}', input.min || '')
.replace('{max}', input.max || '')
: '输入有误，请检查';
document.querySelector('.error-email').textContent = message;
});
提交时批量校验 + 统一映射提示
点击提交时，不依赖单个 invalid 事件，而是主动遍历所有字段，逐个生成结构化错误信息：
form.addEventListener('submit', e => {
e.preventDefault();
const errors = [];
for (const el of form.elements) {
if (!el.checkValidity()) {
const validity = el.validity;
const code = Object.keys(validity).find(k => validity[k]);
const msg = VALIDATION_MESSAGES[code] || '请修正此项';
errors.push({
field: el.name,
code, // 逻辑错误码
message: msg
});
}
}
if (errors.length) {
// 渲染所有错误，例如插入到页面顶部或各字段旁
renderAllErrors(errors);
} else {
form.submit(); // 或走 AJAX 提交
}
});
这样你就有了真正意义上的“错误码 → 文案”映射能力，且支持扩展（比如加 customError 字段用于 setCustomValidity 后的自定义状态）。
