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

Question

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

但是验证并没有按照我期望的方式进行。例如，当我输入一堆符号时，它会识别出用户名输入无效，例如!@#$ 。但如果我从几个字母开始，然后输入一堆符号，例如 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 代替。