不接受数字的模式属性

Question

我正在尝试学习正则表达式并使用pattern属性将其应用于我的表单。我有一个表格，要求输入电子邮件、名字、姓氏和密码。我想要做的是防止姓氏和名字包含数字。所以这是我的代码：

<form action="foo.php" method="post">
    <label for="email">Email</label>
    <input type="email" required class="form-control" id='email-input'>
    <label for="firstName">First Name</label>
    <input type="text" name="firstName" required class="form-control" id='first-name-input' pattern="[^0-9]" title="First name cannot contains any digits">
    <label for="lastName">Last Name</label>
    <input type="text" name="lastName" required class="form-control" id='last-name-input' pattern="[^0-9]" title="Last name cannot contains any digits">
    <label for="password">Password</label>
    <input type="password" required class="form-control" id='password-input'>
    <input type='submit' class='btn btn-success pull-right' value='Complete registration' style="margin-top:0.3em">
</form>

但是，即使我没有在名字和姓氏输入中输入任何数字（只填写真实姓名），我也会填写我的所有输入内容，我收到一条错误消息：请匹配请求的格式。我想要一个解释。为了更好地理解我想在这里做的事情，举个例子：

如果输入为first-namefoo 它不会抛出错误。

如果输入是 foo1 或 1 或 1foo 它将抛出错误

Answer 1

啊，错误的原因很简单。您编写的正则表达式是正确的，因此与 0-9 之间的字符不匹配。您缺少的是它设置为匹配单个字符。使用+关键字指定一个或多个字符

[^0-9] : 匹配不在 0-9 之间的单个字符

[^0-9]+ : 匹配一个或多个不在 0-9 之间的字符

如果您想更精确地控制允许的字符数

[^0-9]{1,5} : 将允许最少 1 个和最多 5 个字符

<form action="foo.php" method="post">
    <label for="email">Email</label>
    <input type="email" required class="form-control" id='email-input'>
    <label for="firstName">First Name</label>
    <input type="text" name="firstName" required class="form-control" id='first-name-input' pattern="[^0-9]*" title="First name cannot contains any digits">
    <label for="lastName">Last Name</label>
    <input type="text" name="lastName" required class="form-control" id='last-name-input' pattern="[^0-9]*" title="Last name cannot contains any digits">
    <label for="password">Password</label>
    <input type="password" required class="form-control" id='password-input'>
    <input type='submit' class='btn btn-success pull-right' value='Complete registration' style="margin-top:0.3em">
</form>