不接受数字的模式属性

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-name 的输入是 foo，它不会抛出错误。

如果输入是 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>

Answer 2

HTML5 pattern 需要完整的字符串输入。如果需要接受不包含数字的值，则需要匹配一个内部没有数字的字符串。在每个 [^0-9] 之后添加 * 以匹配 0 个或多个非数字字符（锚默认由引擎本身添加）：

<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>

注意：您也可以使用pattern="\D*" 将其缩短一点。 \D 匹配非数字字符。

Answer 3

如MDN doc中指定：

检查控件值的正则表达式。模式必须匹配整个值，而不仅仅是某个子集。

如果您知道任何其他正则表达式样式，请考虑 HTML 输入模式总是被 ^ 和 $ 包围。

因此，您当前的表达式匹配只有一个字符不是数字的任何单词。 [^0-9]+ 将适用于至少包含一个字符且没有数字的任何内容。

Answer 4

因为您要添加required 属性。它不允许空输入

您自己的错误抛出示例

function check(){
if(document.getElementsByTagName('input')[0].value.match(/[0-9]/g))
{
console.log('please enter alphapet only')
}

}

<input type="text">
<button onclick="check()">check</button>