如何修复HTML输入元素模式属性不适用于名称验证正则表达式？-解网

问：

我正在尝试使用特定的正则表达式来验证用户的名字在 HTML 表单上。

我使用正则表达式测试器测试了正则表达式，但正则表达式在这里不能作为模式属性中的字符串工作。

问题是什么？有没有可能的解决方案？

<input
  name="firstName"
  pattern="^[\w'\-,.][^0-9_!¡?÷?¿\/\\+=@#$%ˆ&*(){}|~<>;:[\]]{2,}$"
  title="Your first name must be valid"
  type="text"
  placeholder="First Name"
  required
/>

关于规则，基本上是只允许名字。我不确定所有的规则，但这只是文字，空格是允许，不允许使用数字，并且只允许使用某些字符允许，例如撇号（）、连字符（）等。'-

HTML 正则表达式表单验证

我认为问题可能是由于您在字符类。根据正则表达式风格的一些变化在 JavaScript 中，可以启用 u 或 v 标志（似乎硬编码或自动触发，无法设置手动），这可能会导致字符类出现问题。为例如，现在应该用 also 进行转义在字符类中。你在模式中使用了一些。[a-z|]|\|

我不会使用而是替换它，用于匹配任何语言的任何信件。这将匹配“é”或“ÿ”，而不仅仅是没有重音的英文字母。\w\p{L}

匹配所有正确的情况相当复杂，但这是我能建议什么：

^(?:\p{L}['´ \-]?)+(?<=[^\s\-'´])$

这个想法是接受以字母开头的输入，然后后跟可选的空格、连字符或或、一个或多个次。为了避免以空格或其中一个字符结束，你可以在模式结束之前添加积极的后视。'´

这将避免接受类似或 .Jack-Ooooh'

另一个优点是你不能接受或.Jean--JaquesO''Neil

form {
  margin: 1em;
  padding: 0;
  display: flex;
  column-gap: 1em;
}

input {
  padding: 0.25em .5em;
  border: 1px solid gray;
}

input[type="text"] {
  box-shadow: 1px 1px 4px inset rgba(0, 0, 0, 0.1);
}
input[type="text"]:focus {
  outline: 1px solid gray;
}

input[pattern]:focus:valid {
  border-color: green;
}

input[pattern]:focus:invalid {
  border-color: red;
}

input[type="submit"] {
  background-color: silver;
}

:focus-visible {
  outline: none;
}

<form action="#">
  <div class="form-element">
    <input
      name="firstName"
      pattern="^(?:\p{L}['´ \-]?)+(?<=[^\s\-'´])$"
      title="Your first name must be valid"
      type="text"
      placeholder="First Name"
      required
    />
  </div>
  <div class="form-element form-submit">
    <input type="submit" value="Submit" />
  </div>
</form>

您还可以使用示例和解释来测试正则表达式这里： https://regex101.com/r/tmEsgX/2

上一个：验证 Terraform 变量是否为字母数字字符串列表

下一个：正则表达式从电话号码中排除空格

如何修复HTML输入元素模式属性不适用于名称验证正则表达式？

How to fix a HTML input element pattern attribute not working with name validation regex?

评论