如何根据一定的标准在angularjs中使用正则表达式添加密码验证?

时间:2016-04-01 09:22:38

标签: javascript angularjs validation ng-pattern angularjs-ng-pattern

我想验证用户输入的密码是否符合以下条件:

密码长度至少应为8个字符,并且应包含一个数字,一个字符和一个特殊字符。

为此,我使用了以下正则表达式:

^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$

我在angularjs代码中尝试了这个表达式,如下所示:

<md-input-container class="md-block" style="margin-top:0px;">
            <label>Password</label> <md-icon
                md-svg-src="/images/icons/ic_lock_black_24px.svg" class="name"></md-icon>
            <input type="password" ng-model="newUser.userPassword"
                name="userPassword" required 
                ng-pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$">
            <div
                ng-messages="registerForm.userPassword.$error">
                <div ng-message="pattern">Password should be atleast 8 characters long
                    and should contain one number,one character and one special
                    character</div>
                <div ng-message="required">Password should be atleast 8 characters
                    long and should contain one number,one character and one special
                    character</div>
            </div>
            </md-input-container>

在上面的代码中,当密码字段为空并且焦点丢失时,将显示错误消息。如果用户输入的密码不符合我提到的标准,则错误消息不会显示。

我该如何解决这个问题?有人请帮助我。

4 个答案:

答案 0 :(得分:16)

据我了解你的问题。检查你的控制台它可能会因词汇错误而中断。

您在ng-pattern的开头和结尾忘记了slash。 请使用ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/"

我创造了一个可能对你有所帮助的插件。 https://plnkr.co/edit/qCjp6a?p=preview

答案 1 :(得分:2)

只是几个笔记

1)上面包含一个冗余$。它应该是ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/"

2)不要删除前导^和尾随$,因为它无法进入空格

3)如果你想在控制器中定义模式,那么

$scope.passwordStrength = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;<input ng-pattern="passwordStrength">

但从不

$scope.passwordStrength = "/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/";

因为模式是RegExp对象,而不是字符串。

希望这可以帮助您节省一些时间。

答案 2 :(得分:0)

我通过Angular的内置模式验证器对此进行了测试,并提出了以下检查条件:

  • 长度至少8个字符
  • 小写字母
  • 大写字母
  • 数字特殊字符

    password: [ '', [ Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}') ] ]

我要补充一点,我绝不是正则表达式专家。对于与OP密切相关的案例,这就是对我有用的方法。也许会帮助别人。 Mozilla的文档在解决这一问题方面大有帮助,特别是“编写正则表达式模式”部分。

答案 3 :(得分:0)

您可以使用此正则表达式模式将其正常工作:

"/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/".

但是您需要将其写在.ts文件(控制器类)中,因为如果您在.html文件中写正则表达式作为输入字段的'type'“密码” ,您将始终抛出错误“无效密码”。因为您正在编写一个正则表达式来检查字母数字和特殊字符输入,但是由于输入字段的类型为password,所以此正则表达式将检查加密的输入,这总是会失败。