用于 HTML 名称输入验证的正则表达式不起作用

Question

我想使用此模式 /^[a-zA-ZÀ-ÖØ-öø-ÿ+\.+\- ]+$/i 来验证 <input> 字段中的名称。但是在 HTML 验证中这不起作用。我之前使用了 pristine.js，在那里它没有任何问题。

我还创建了一个 JS Fiddle： https://jsfiddle.net/3et69oz8/:

<form>
  <input id="first name" name="first_name" required
  pattern="/^[a-zA-ZÀ-ÖØ-öø-ÿ+\.+\- ]+$/i">
  <button>Submit</button>
</form>

Answer 1

首先，您需要使用 string 正则表达式模式，而不是 HTML pattern 属性中的正则表达式文字，并且您不必像 @987654322 那样使用不区分大小写的修饰符@ 和 À-ÖØ-öø-ÿ 范围包括小写和大写字母。

接下来，您正在使用^ 和$ 锚点，但HTML pattern 属性默认锚定匹配，它编译模式前面有^(?: 和)$ 在给定的末尾模式字符串。因此，它们在这里是多余的。 与+ 之一或两者相同，不清楚是否要在用户输入中允许+ 符号。如果你这样做了，只需保留一次。

此外，您不需要转义方括号内的.，并且可以将- 移到字符类的末尾，这样您就不必转义它。

所以，你可以使用

<form>
  <input id="first name" name="first_name" required pattern="[a-zA-ZÀ-ÖØ-öø-ÿ.+ -]+">
  <button>Submit</button>
</form>

详情：

• ^(?:（隐式添加）- 字符串的开头和非捕获组的开头
• [a-zA-ZÀ-ÖØ-öø-ÿ.+ -]+ - 字符集/范围中指定的字符之一。 注意+，如果不允许用户输入，请删除。
• )$（隐式添加）- 组和字符串的结尾。