angular 文本框只能避免 1 个特殊字符

angular text box avoid only 1 special character

美好的一天,

我有一个要求,只需要不允许用户输入一个特殊字符,即~。以下是我的代码:

<div class="form-input ">
          <input class="pass" [type]="'password'" name="newPassword"
            placeholder="New Password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#&()-/$=<>?]).*$" #newPassword="ngModel"
            [(ngModel)]="newPassword" (ngModelChange)="checkNewPassword()"
            (click)="onInputFocus()" minlength={{changePasswordFormCriteria.minPwrdLength}}
            maxlength=30 (blur)="checkNewOldPassVal()">
          </div>
        </div>

<div *ngIf="newPassword.errors?.pattern && loginPasswordForm.submitted" class="form-errors">
          New Password must consist at least one uppercase, one lowercase letter, one number and one special characters within this range ! @ # & ( ) - ? / $ = < >
        </div>

如您所见,我从 pattern 中排除了 ~ 字符。如果我只输入1个特殊字符~就可以了,比如“password~abc”,这会提示newPassword.errors?.pattern中的错误信息。这是正确的,符合要求。

但是如果我包含其他特殊字符,比如我输入"password@~abc",这样就不会提示错误信息,可以通过。我想知道我没有在模式中包含 ~,但不确定为什么它仍然可以通过。

请问我做错了什么?

您使用的表达式只确保输入的字符串包含所提供的表达式。它不会强制从输入中排除 ~。

您可能想试试这个

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#&()\-/$=<>?])[a-zA-Z0-9!@#&()\-/$=<>?]+$

还有一件事,在你的正则表达式的这一部分

...[!@#&()-/$=<>?]...

您必须分隔连字符 (-),否则它将允许 ascii 41-47 范围内的字符。它应该看起来像这样

...[!@#&()\-/$=<>?]...

或者像@Cary 指出的那样简单地将连字符添加到开头或结尾。