html - 用于 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

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

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

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

所以，你可以使用

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

详细信息:

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