用于文本框验证的 HTML5 正则表达式模式：仅允许字母、空格和某些字符

Posted 2023-05-09

【中文标题】用于文本框验证的 HTML5 正则表达式模式：仅允许字母、空格和某些字符

【英文标题】：HTML5 Regex Pattern for textbox validation: allow alphabet, spaces, and certain characters only

【发布时间】：2019-05-26 23:58:46

【问题描述】：

我正在用 html 创建一个表单，对于文本输入，我想对其进行正则表达式验证，只允许用户输入：字母、数字和某些字符；

/ - forward slash

- - hyphen

. - period (full stop)

& - ampersand

  - spaces

我尝试过这种模式，但无济于事：

[a-zA-Z0-9\/\-\.\&\ ]

我的 HTML 代码：

<input type="text" id="payment_reference" name="payment_reference" maxlength="18" value="' . $payment_reference_default . '" pattern="[a-zA-Z0-9\/\-\.\&\ ]" required>

我知道如何只获取字母字符和数字，但也允许其他字符是我无法管理的。

【问题讨论】：

它应该可以工作。你得到什么错误？

【参考方案1】：

您需要从 每个非特殊字符 中删除转义，因为在 FF（和 Chrome）中，HTML5 正则表达式是使用 u 修饰符编译的，它对模式有更大的限制。要启用匹配 1 个或多个允许的字符，请在字符类后添加 +：

pattern="[a-zA-Z0-9/.& -]+"

请注意，除了- 之外，模式中的所有特殊字符在字符类中都不是特殊字符。因此，只有- 可以转义，但通常将其放在字符类的开始/结束位置以避免过度转义。

input:valid 
  color: black;

input:invalid 
  color: red;

<form name="form1"> 
 <input pattern="[a-zA-Z0-9/.& -]+" title="Please enter the data in correct format." />
 <input type="Submit"/> 
</form>

【参考方案2】：

你需要正确地转义字符。

- 我没有在这里转义它，因为当你将它用作字符类中的第一个或最后一个字符时，你不需要转义

[a-zA-Z0-9\/.&\s-]

Demo

【讨论】：

我用以下字符串 '2WestStreetL341LQ' 尝试了你的语法，我得到'无效格式'。由火狐返回

奇怪，它适用于您的正则表达式检查器，但不适用于 Firefox Quantum 64.0（64 位）