产品编码校验需先明确规则再选方案：pattern仅适合简单静态格式拦截，而javascript+test()才能处理空格、大小写、零宽字符等真实场景问题。
产品编码校验不能只靠 pattern 一锤定音，得先明确编码规则再选方案：固定长度纯数字？带字母前缀？含分隔符？不同规则对应不同写法和坑点。
用 pattern 做静态格式拦截（适合简单规则）
浏览器只在表单提交时触发验证，不监听输入、不自动清错、不处理空格。它适合“一眼能判对错”的场景，比如 8 位纯数字编码或固定前缀+数字组合。
-
pattern值必须是不带/^$/的纯字符串，例如：pattern="[A-Z]{2}\d{6}"表示“2 个大写字母 + 6 位数字”，输AB12345或AB1234567都会失败 - 别写
pattern="/[A-Z]{2}\d{6}/"—— 斜杠会被当字面量，整个正则失效 - 中文或特殊字符要小心：
pattern="[\u4e00-\u9fa5A-Za-z0-9\-]{5,12}"中的\u4e00-\u9fa5在 HTML 属性里必须双写u，单写\u会被解析器吞掉 - 必须配
required和title，否则空值直接放过，失败时连提示都没有
用 JavaScript + test() 做可控校验（推荐用于生产）
真正做产品编码校验时，pattern 很快就不够用：要自动 trim 空格、要兼容粘贴进来的带空格/短横线格式、要跨字段查重、要对接后端校验结果……这些都得靠 JS。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正则定义用字面量，别用
new RegExp()：例如const codeRegex = /^[A-Z]{2}\d{6}$/;，避免双重转义问题 - 调用
test()前务必.trim()：用户粘贴" AB123456 "会导致匹配失败 - 手机号类思路可复用：若允许用户输入
AB-123-456，正则可写成/^[A-Z]{2}-?\d{3}-?\d{3}$|^([A-Z]{2}\d{6})$/，再用.replace(/[-\s]/g, '')预处理 - 绑定
input或blur事件，每次输入后调用setCustomValidity("")清空旧错误，否则改完内容再提交仍报错
容易被忽略的三个实际问题
产品编码常被当成“简单字符串”来处理，但真实业务中这三个点最容易翻车：
- 大小写混用：用户输
ab123456虽然格式对，但系统可能要求全大写 ——pattern不管大小写，JS 校验得加.toUpperCase()统一处理 - 零宽字符残留：从 Excel 复制的编码常带不可见的
\u200b或\ufeff，.trim()清不掉，得用.replace(/[\u200b\uFEFF]/g, '') - 移动端 Safari 对 Unicode 字符集支持差：比如
[\u4e00-\u9fa5]在 iOS 上可能完全不生效，涉及中文编码时建议放宽为[a-zA-Z0-9\u4e00-\u9fa5\-\s]并靠 JS 后续过滤
真正难的不是写对正则，而是把用户“怎么输都可能”的现实行为，映射到系统能稳定识别的字符串上 —— 这一步 JS 预处理绕不开，pattern 只能当第一道筛子用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
