如何使用HTML正则表达式校验纯数字字符串-html教程-PHP中文网

html input 的 pattern 属性自动隐式锚定，无需且不应使用 ^ 和 $；它仅匹配整个字符串，不支持正则断言，也无法校验前导零等复杂逻辑，需配合 javascript 补充校验。

如何使用html正则表达式校验纯数字字符串

HTML `input` 的 `pattern` 属性不支持正则断言，别用 `^` 和 `$`

HTML 表单的 pattern 属性**自动隐式锚定**——它只匹配整个字符串，等价于在你写的正则两端加了 ^ 和 $。所以写 pattern="^[0-9]+$" 和 pattern="[0-9]+" 效果完全一样，但前者多余且易误导。

常见错误是照搬 JavaScript 正则习惯，硬塞首尾锚点，结果调试半天发现没报错也不生效——其实是正则本身写错了（比如漏了量词），不是锚点问题。

pattern="[0-9]+"：允许一个或多个数字，如 "123" ✅，"" ❌，"12a" ❌
pattern="[0-9]*"：允许空字符串或任意数字组合，通常不推荐用于“纯数字”校验
pattern="[0-9]{1,10}"：限制长度 1–10 位，适合手机号、ID 等场景

要排除开头为 0 的数字？`pattern` 做不到，得靠 JS 补充

HTML 原生 pattern 无法表达「非零开头的正整数」这种逻辑。像 "0123" 这种字符串，用 [0-9]+ 会通过，但它不是合法的十进制整数表示（除非业务明确接受前导零）。

这时候必须用 JavaScript 配合 checkValidity() 或 reportValidity() 做二次校验：

const input = document.querySelector('input[name="number"]');
input.addEventListener('input', () => {
  const val = input.value;
  // 先过 pattern 基础校验，再排除前导零（除非就是 "0"）
  if (val && !/^[0-9]+$/.test(val)) return;
  if (/^0[0-9]+/.test(val)) {
    input.setCustomValidity('不能以 0 开头');
  } else {
    input.setCustomValidity('');
  }
});

注意：setCustomValidity('') 才代表校验通过；非空字符串才会触发浏览器默认提示。