用于HTML名称输入验证的Regex不起作用

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

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

接下来，您将使用^和$锚，但HTMLpattern属性默认锚定匹配，它编译的模式前面有^(?:，后面有)$。所以，它们在这里是多余的与其中一个+或两者相同，不清楚是否允许在用户输入中使用+符号。如果你这样做了，只保留一次。

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

所以，你可以使用

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

详细信息：

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