Question

我使用Angular的内置表单验证器遇到了一些奇怪的验证行为。在我的用户名<input>字段中，我的ng模式只允许使用字母或数字（ng-pattern="/[A-Z0-9]/i"）。

但验证并没有像我期望的那样发挥作用。例如，当我输入一串符号时，它识别用户名输入无效，例如!@#$。但是如果我从几个字母开始，然后键入一串符号，例如SomeUser!@#$，它将在第一个符号!上抛出验证错误，但是当我键入第二个符号时符号@，它将错误关闭。我输入的每个第3或第4个符号将再次打开/关闭错误。

我已尝试查看Angular文档，但我没有看到任何表明我未正确实施ng-pattern的内容。

以下是代码：

<form name="signupForm" ng-submit='signup()'>
    <input name="nameInput" type='text' ng-model='user.username' ng-pattern = "/[A-Z0-9]/i">
    <input name="passwordInput" type="password" ng-model='user.password' ng-pattern = "/[A-Z0-9]/i">
    <button>signup</button>
</form>
<span class = 'error' ng-show="signupForm.nameInput.$invalid && signupForm.nameInput.$dirty">Invalid username</span>

Answer 1

我认为这就是你所需要的：

<input name="nameInput" type='text' ng-model='user.username' ng-pattern="/^[A-Z0-9]*$/i">

Angular documentation明确声明您不应使用g标志。

正则表达式中的星号表示“零或更多”，因此空字符串将被视为有效。您可以使用“+”代替（“一个或多个”），但这意味着当用户尚未在输入字段中输入任何内容时，错误消息将立即显示。你可以使用ng-required。

使用ng-pattern在Angular中出现意外的验证行为

1 个答案: