HTML输入框如何实现正则表达式自动校验-html教程-PHP中文网

能，但仅限表单提交时触发，且不支持实时反馈；用户输入过程中不会高亮或拦截，仅在点击type="submit"按钮或按回车提交时，浏览器才用pattern正则校验值并弹出默认提示。

html输入框如何实现正则表达式自动校验

input 的 `pattern` 属性能直接触发浏览器原生校验吗？

能，但仅限表单提交时触发，且不支持实时反馈。用户输入过程中不会高亮或拦截，只有点击 <button type="submit"></button> 或按回车提交时，浏览器才用 pattern 正则校验值，并弹出默认提示（如“请匹配指定格式”）。这个行为不可定制样式，也无法捕获校验失败的细节。

常见误区是以为加了 pattern 就能“自动实时校验”，结果发现输错内容毫无反应——这是正常表现，不是 bug。

pattern 值必须是 JavaScript 正则字面量的主体（不含 / 开头结尾），例如邮箱应写 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"，而不是 /.../
正则默认**不锚定首尾**，浏览器会自动加上 ^ 和 $，所以无需手动写
若需允许空值，得显式在正则中包含 ? 或 |^$，否则空字符串也会校验失败

如何用 `addEventListener("input")` 实现实时校验？

这才是真正“自动”的做法：监听每次输入，调用 RegExp.test() 判断，再通过 setCustomValidity() 控制校验状态。关键在于不能只改样式，还要影响表单的 checkValidity() 结果，否则提交时仍可能绕过。

示例：手机号实时校验（11位数字）

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<input type="text" id="phone"><script>
const phoneInput = document.getElementById("phone");
const phoneRegex = /^1[3-9]\d{9}$/;
<p>phoneInput.addEventListener("input", () => {
const value = phoneInput.value.trim();
if (value === "") {
phoneInput.setCustomValidity(""); // 清空错误，允许为空
} else if (!phoneRegex.test(value)) {
phoneInput.setCustomValidity("请输入正确的11位手机号");
} else {
phoneInput.setCustomValidity(""); // 校验通过
}
});
</script>

必须调用 setCustomValidity("") 显式清空错误，否则一旦设过非空字符串，后续即使输入正确也不会自动恢复为 valid 状态
不要在 input 事件里直接修改 value（比如过滤非数字），会导致光标跳动；如需过滤，改用 beforeinput 事件或受控组件逻辑
正则中的 ^ 和 $ 必须手动写，因为 test() 不自动锚定

为什么 `invalid` 伪类没生效？

因为 :invalid 只响应浏览器原生校验状态（如 required、type="email" 或 pattern 提交校验），而 setCustomValidity() 设置的错误**不会自动触发 :invalid** —— 它只影响 JS 的 checkValidity() 和提交行为。

要让样式同步，得手动切换 class：

phoneInput.addEventListener("input", () => {
  // ... 上面的 test 和 setCustomValidity 逻辑
  phoneInput.classList.toggle("invalid", phoneInput.validity.customError);
});