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

Question

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

但是验证并没有按照我期望的方式进行。例如，当我输入一堆符号时，它会识别出用户名输入无效，例如!@#$。但是如果我从几个字母开始，然后输入一堆符号，例如SomeUser!@#$，它会在第一个符号! 上抛出验证错误，但是当我输入第二个符号@ ，它会关闭错误。我输入的每第三或第四个符号都会再次打开/关闭错误。

我尝试查看 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。