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

Question

我正在用 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>

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

Answer 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>

Answer 2

你需要正确地转义字符。

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

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

Demo