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>

- user13532951

---

嗨@YoKoGFX，模式已经在输入标签中被视为Unicode，并且您已经考虑了\i与a-zA-Z，因此只需从开头删除/和结尾的/i，您就可以了。也就是说，您应该有"^[a-zA-ZÀ-ÖØ-öø-ÿ+\.+\- ]+$"。 - Ishan

Answer 1

首先，你需要在HTML的pattern属性中使用一个字符串正则表达式模式，而不是一个正则表达式字面量，并且你不必使用大小写不敏感的修饰符，因为a-zA-Z和À-ÖØ-öø-ÿ范围包括大小写字母。

接下来，你使用了^和$锚点，但是HTML的pattern属性默认锚定匹配项，它会在给定的模式字符串前面编译^(?:，并在末尾添加)$。所以，在这里它们是多余的。同理+符号中的一个或两个也是如此，不清楚您是否允许用户输入+符号。如果是，请只保留一个。

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

因此，你可以使用以下正则表达式：

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

详情:

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

- Wiktor Stribiżew