HTML中input标签的pattern属性正则验证输入格式-html教程-PHP中文网

pattern属性仅在表单提交或调用checkValidity()时触发验证，不监听实时输入；需配合required和title使用，且正则书写须注意双反斜杠转义、避免贪婪匹配，移动端提示受限，复杂场景必须JS补位。

html中input标签的pattern属性正则验证输入格式

pattern属性只在提交时触发验证，不监听实时输入

很多人以为给 <input pattern="..."> 加上正则就能实时高亮错误，其实 pattern 不会自动监听 input 或 blur 事件——它只在表单调用 checkValidity() 或用户点击 submit 时才生效。浏览器不会主动标红、弹提示，除非你配合 required 和原生表单提交逻辑。

常见误区是写完 pattern 就以为“前端校验完成了”，结果用户输错内容却毫无反馈，直到点提交才看到红色边框或 title 提示（如果写了的话）。

必须搭配 required 才能触发必填 + 格式双重校验（否则空值也能通过）
提示文案靠 title 属性，不是 placeholder：例如 <input pattern="[0-9]{3}" title="请输入3位数字">
移动端 Safari 对 title 支持弱，iOS 用户可能看不到提示，需额外 JS 补充
pattern 正则默认是“全匹配”，不需要加 ^ 和 $ —— 浏览器内部已隐式包裹

正则写法要避开贪婪匹配和未转义字符

pattern 的正则引擎是浏览器内置的 RegExp，但不支持某些高级特性（如 lookbehind、命名捕获组），而且对反斜杠处理更敏感。写错一个转义就直接失效，比如想匹配邮箱中的点号 .，写成 .*@.*..* 会报语法错误，因为 HTML 属性值里反斜杠要双写。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

点号必须写成 .，而 HTML 中要写成 \.（第一个反斜杠转义第二个）
中文字符用 Unicode 范围，例如 [\u4e00-\u9fa5]，注意双反斜杠
避免用 .* 开头或结尾，容易导致“看似通过实则没校验”——比如 pattern=".*abc" 允许任意前缀，失去约束力
手机号常用写法：pattern="1[3-9]\d{9}"（注意双反斜杠），别漏掉 1 开头限制

与 JavaScript 的 RegExp.test() 行为不完全一致

pattern 内部调用的是类似 new RegExp(`^${attrValue}$`).test(value)，但细节有差异：比如不支持 g 或 i 标志，且部分浏览器对 Unicode 字符类支持不一。最典型的是，pattern="d+" 在 Chrome 可用，但在旧版 Firefox 可能不识别 d，得写成 [0-9]+。

坚持用字符类代替简写：用 [0-9] 替 d，[a-zA-Z] 替 [a-z]（忽略大小写不可控）
测试时别只信控制台 /^d+$/.test("123")，要真放进 input 提交看效果
空格容易被忽略：pattern="[a-z]+" 会拒绝带空格的姓名，需明确是否允许——加 \s？那也要双写 \s
IE10+ 支持 pattern，但 Android 4.4 WebView 有 bug，遇到复杂正则建议降级为 JS 校验

真正可靠的校验需要 JS 补位，尤其在非 submit 场景

如果页面用 AJAX 提交、禁用原生 submit、或需要输入中实时反馈（比如密码强度、用户名可用性），pattern 完全无用。这时候必须手动监听 input 事件，用 RegExp.prototype.test() 判断，并操作 setCustomValidity() 来干预原生验证状态。

关键代码模式：

input.addEventListener('input', () => {
  const isValid = /^[a-z0-9_]{3,16}$/.test(input.value);
  input.setCustomValidity(isValid ? '' : '只能用小写字母、数字、下划线，3–16位');
});