HTML表单如何自定义正则表达式校验规则-html教程-PHP中文网

pattern仅对text、search、tel、url、email、password六种type生效；number、date等类型会忽略它；写法勿加/^$/和标志；提示靠title属性；复杂校验必须用JavaScript。

html表单如何自定义正则表达式校验规则

pattern 属性只对特定 type 生效，别乱套在 number 或 date 上

pattern 不是万能的“正则开关”，它只在 text、search、tel、url、email、password 这六种 type 下被浏览器识别并触发校验。其他类型如 number、date、range 会直接忽略 pattern —— 因为浏览器先把它转成数值或日期对象，原始字符串早没了。

常见翻车现场：

：永远不校验，iOS 还可能自动删前导零
：✅ 正确，tel 保留字符串且唤起数字键盘
：✅ 兼顾移动端体验与格式控制

pattern 写法不能带 /^$/ 和标志，否则白写

浏览器会自动给你的 pattern 值加上 ^ 和 $ 锚点，你只需写核心模式。加多了不仅冗余，还可能在旧版 Safari 中导致整条规则被跳过。

正确写法示例：

pattern="[a-zA-Z0-9_]{3,16}"（用户名）
pattern="1[3-9]\d{9}"（手机号）
pattern="(?=.*\d)(?=.*[a-z]).{8,}"（密码强度，但注意 Safari 14 以下不支持环视）

错误写法及后果：

pattern="/^[0-9]{6}$/"：斜杠被当作文本，整个表达式变成字面匹配，永远失败
pattern="^[0-9]{6}$"：锚点重复，部分浏览器解析异常
pattern="d{8}"：缺反斜杠，实际匹配的是字母 d 而非数字

title 是唯一可控的提示出口，不设就等于没提示

pattern 本身不提供任何用户可见的错误文案。浏览器默认提示是“请与所要求的格式匹配”，毫无信息量。真正能控制提示内容的，只有 title 属性。

HTML Text Extract

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

下载

实用建议：

title="请输入6位纯数字，不要加空格或字母" 比 title="格式错误" 有用十倍
iOS Safari 对 title 支持偏弱，强提示场景必须配合 JavaScript 的 setCustomValidity()
title 不参与校验逻辑，可以放心写中文、emoji、标点，无需 URL 编码

复杂规则必须用 JavaScript，pattern 只是第一道防线

pattern 根本做不到跨字段比对（如“密码与确认密码一致”）、实时反馈、API 联动或动态规则更新。一旦遇到这些需求，就得用 JavaScript 接管。

关键实操点：

监听 input 或 blur 事件，用 RegExp.test() 主动校验
动态正则必须用 new RegExp(string) 构造函数，/.../ 字面量无法拼接变量
避免在频繁触发的事件中重复创建正则对象，提取为常量或闭包缓存
慎用 g 标志：/g 会让 test() 维护 lastIndex，多次调用时偶发失败，去掉即可
用 setCustomValidity() 设置错误，setCustomValidity("") 清除错误，否则后续 reportValidity() 一直报错