Question

我正在尝试学习reqular表达式并使用pattern属性将其应用于我的表单。我有一个表单，要求发送电子邮件，firstName，lastName和password。我想要做的是防止lastName和firstName包含数字。所以这是我的代码：

<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属性.it将不允许空输入

您自己的错误抛出示例

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>

不接受数字的模式属性

4 个答案: