pattern对readonly输入框无效，因其仅对可编辑输入生效，且readonly字段不触发校验流程；应在校验点前移至生成或提交时手动检查，并始终依赖后端校验。

只读输入框（readonly）本身不接受用户输入，因此用 pattern 校验它没有意义——浏览器根本不会触发校验逻辑，也不会在提交时检查它的值是否匹配正则。

html-to-pptx-converter

使用 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，后端仍必须做同等强度的正则校验。