pattern对readonly输入框无效，因其仅对可编辑输入生效，且readonly字段不触发校验流程；应在校验点前移至生成或提交时手动检查，并始终依赖后端校验。
只读输入框（readonly）本身不接受用户输入，因此用 pattern 校验它没有意义——浏览器根本不会触发校验逻辑，也不会在提交时检查它的值是否匹配正则。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
为什么 pattern 对 readonly 输入框无效
pattern 属性只对可编辑的输入生效，且仅在表单提交或显式调用 checkValidity() 时触发。而 readonly 输入框：
- 用户无法修改内容，浏览器跳过所有交互式校验流程
- 即使你写了 pattern="[0-9]{6}"，它既不会标红，也不会阻止提交
- checkValidity() 在该字段上始终返回 true（除非它同时是 required 且为空）
真正需要校验只读内容时，该怎么做
只读字段的值通常来自后端、JS 计算或隐藏逻辑生成，它的“合法性”不在用户输入环节，而在生成环节。所以校验点必须前移：
- 生成时校验：比如 JS 设置 input.value = computedCode 前，先用 /^[0-9]{6}$/.test(computedCode) 检查
- 提交前校验：监听 submit 事件，手动检查该字段值：
form.addEventListener('submit', e => {<br> const codeInput = form.querySelector('[name="code"]');<br> if (!/^[0-9]{6}$/.test(codeInput.value)) {<br> codeInput.setCustomValidity('验证码格式错误');<br> e.preventDefault();<br> } else {<br> codeInput.setCustomValidity('');<br> }<br>});
- 不要混用 readonly 和 pattern：写了也白写，还可能误导后续维护者以为“这里做了校验”如果想让用户看到但不能改，又需要提交时强制格式校验
这种情况本质不是“只读”，而是“受控只读”。正确做法是：
- 保留 input 可编辑（去掉 readonly）
- 用 JS 禁用输入行为，但允许值被程序设置：
input.addEventListener('input', e => {<br> if (e.target.value !== expectedValue) {<br> e.target.value = expectedValue;<br> }<br>});
- 同时加上 pattern + required + title，确保提交时校验走通
- 这样既满足视觉只读感，又让原生校验链路完整最容易被忽略的是：只读字段的值可能被 JS 动态篡改、被开发者工具手动修改、或从 URL 参数注入——这些路径都绕过前端校验。所以无论怎么设 readonly 或加 pattern，后端仍必须做同等强度的正则校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
