H5 中怎么通过 JS 动态修改 input 的 pattern 属性实现动态规则-H5教程-PHP中文网

可直接用 javascript 动态修改 input 的 pattern 属性，如 input.pattern = "\d{6}"，无需正则边界符；修改后需手动调用 checkvalidity() 或 reportvalidity() 触发校验与提示。

h5 中怎么通过 js 动态修改 input 的 pattern 属性实现动态规则

可以直接用 JavaScript 修改 input 元素的 pattern 属性，但要注意：修改后不会自动触发校验，需手动调用 checkValidity() 或结合事件（如 input、blur）来实时反馈。

直接设置 pattern 属性

通过 element.pattern = "正则字符串" 即可动态赋值。注意 pattern 值是纯字符串，不带 /^...$/ 边界符，浏览器会自动按“开头到结尾”匹配（等价于隐式包裹 ^ 和 $）。

✅ 正确写法：input.pattern = "\d{6}";（匹配 6 位数字）
❌ 错误写法：input.pattern = "^\d{6}$";（重复加边界符，可能引发意外行为）
⚠️ 转义要小心：反斜杠在 JS 字符串中需双写，如匹配一个反斜杠要写 "\\+"

配合 validity 实时校验

仅改 pattern 不会立刻影响表单状态或显示错误提示。需主动检查并处理 UI：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

调用 input.checkValidity() 返回布尔值，判断当前值是否符合新规则
调用 input.reportValidity() 可触发原生错误气泡（含 title 或 setCustomValidity 提示）
推荐在 input 或 blur 事件中更新 pattern 后立即校验

根据业务场景切换规则示例

比如手机号输入框，在区号选择变化后切换验证规则：

const phoneInput = document.getElementById("phone");
const areaSelect = document.getElementById("area");

areaSelect.addEventListener("change", () => {
  switch (areaSelect.value) {
    case "CN":
      phoneInput.pattern = "1[3-9]\d{9}";
      break;
    case "US":
      phoneInput.pattern = "[2-9]\d{2}[2-9]\d{2}\d{4}";
      break;
    default:
      phoneInput.pattern = "";
  }
  // 立即校验并更新提示
  if (!phoneInput.checkValidity()) {
    phoneInput.reportValidity();
  }
});