单靠 pattern 不保险，必须配合 JavaScript 实时清洗与校验；pattern 仅提交时触发且不处理空格、全角等，JavaScript 才能监听 input/paste/blur 做即时拦截与标准化清洗。
邮政编码校验该用 pattern 还是 JavaScript？
直接结论：单靠 pattern 做前端校验不保险，必须配合 JavaScript；但 pattern 可以提供基础提示和原生 UI 反馈，两者要一起用。
原因很简单：pattern 仅在表单提交或调用 checkValidity() 时触发，用户输入中途不会实时反馈；而且它不处理空格、全角字符、粘贴乱码等常见场景。JavaScript 才能监听 input、paste、blur 等事件做即时清洗与拦截。
-
pattern建议只写最简正则，比如中国邮编用pattern="[0-9]{6}"，别加^$（浏览器自动包裹） - 不要依赖
pattern防止非法提交——后端必须重复校验 - 若用
inputmode="numeric"，iOS 上可能弹出数字键盘但允许输入字母，不能替代校验
中国邮政编码的常见误判和清洗逻辑
用户常输错：开头带零被自动截断（如粘贴“012345”变成“12345”）、混入空格或中文顿号、末尾多一个回车、全角数字“０１２３４５”。这些都会让 /^[0-9]{6}$/.test(value) 直接失败，但不该直接报错，应先清洗。
- 统一转半角：
value.replace(/[\uFF10-\uFF19]/g, c => String.fromCharCode(c.charCodeAt(0) - 0xFEE0)) - 删所有非数字字符（保留数字）：
value.replace(/\D/g, '')，注意别用\s单独删空格——全角空格 \u3000 不会被匹配 - 截取前 6 位再补零：
num.slice(0, 6).padStart(6, '0')，避免“123”补成“000123”这种误导性填充 - 清洗后长度不是 6 就标为无效，不自动修正（例如“12345”不补“0”）
如何监听粘贴并阻止非法内容？
用户右键粘贴或 Ctrl+V 是校验失效高发场景。paste 事件里拿不到原始字符串（clipboardData 被限制），但可以 event.preventDefault() 后手动读取，并插入清洗后的结果。
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('paste', (e) => {
e.preventDefault();
const pasted = (e.clipboardData || window.clipboardData).getData('text');
const cleaned = pasted.replace(/\D/g, '').slice(0, 6);
if (cleaned.length === 6) {
input.value = cleaned;
}
});
- 必须调用
e.preventDefault()，否则原生粘贴会覆盖你的逻辑 - 不要在
paste里直接setSelectionRange或 focus——移动端兼容性差 - 如果输入框有
maxlength="6"，iOS Safari 可能截断粘贴内容导致清洗失败，建议去掉maxlength，改用 JS 控制
国际化场景下怎么区分不同国家邮编格式？
一个输入框支持多国邮编时，别用单一正则硬套。优先根据用户选择的国家（如 <select name="country">）动态切换规则，而不是靠地理定位或 IP 猜测。
- 美国 ZIP：支持
12345或12345-6789，正则用/^\d{5}(-\d{4})?$/ - 日本邮编：格式为
123-4567，但用户常输“1234567”，清洗时可自动加短横（val.replace(/^(\d{3})(\d{4})$/, '$1-$2')） - 英国邮编：规则复杂（如
SW1A 1AA），建议用成熟库如postal-codes，自己写正则极易漏 case - 如果国家未选，先禁用邮编输入框，或默认用最宽松规则（如非空 + 至少 3 位数字）并提示“请选择国家”
真正难的不是写对一个正则，而是让用户在输错时立刻知道哪里不对、该怎么改——比如光标位置、错误提示文案、是否自动删除非法字符。这些细节比“能不能校验”影响更大。
