Question

我试图在AngularJs中进行密码验证。

HTML

<input type="password" id="inputPassword1"   name="Password" class="form-control" data-ng-model="passwordd"  ng-pattern="/^[A-Za-z0-9_+@&$#!^%*-]{6,10}$/"  placeholder="Password" required />
<span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span>

<input type="password" id="inputPassword" class="form-control" ng-change="doPwdMatch()" name="password" data-ng-model="password2"  placeholder="Confirm Password" required />
<span ng-show="pwdDonotMatch"> <span style="color:red">Passwords don't match.</span> </span>

JS

$scope.doPwdMatch=function(){

            if(($scope.password2!=="" || $scope.password2==undefined ) && $scope.passwordd !== $scope.password2){
                    $scope.pwdDonotMatch = true;
            }else
                    $scope.pwdDonotMatch = false;
            }

如果确认密码与密码不匹配，则显示错误。但是，如果我清除密码字段并输入其他值，则无法验证。具体而言，不会进行反向检查。

Answer 1

您只需在密码标记中添加ng-change="doPwdMatch()"即可，

<input type="password" id="inputPassword1"   name="Password" class="form-control" data-ng-model="passwordd" ng-change="doPwdMatch()"  ng-pattern="/^[A-Za-z0-9_+@&$#!^%*-]{6,10}$/"  placeholder="Password" required />
<span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span>

<input type="password" id="inputPassword" class="form-control" ng-change="doPwdMatch()" name="password" data-ng-model="password2"  placeholder="Confirm Password" required />
<span ng-show="pwdDonotMatch"> <span style="color:red">Passwords don't match.</span> </span>

修改

您可以在函数pwdDonotMatch()中添加此逻辑。也就是说，您可以检查password2的模型是否具有任何值。

$scope.doPwdMatch = function () { if ($scope.password2 == "" || $scope.passwordd == "") { // If any one field is null, then do not display error message $scope.pwdDonotMatch = true; } else if (($scope.password2 !== "" || $scope.password2 == undefined) && $scope.passwordd !== $scope.password2) { $scope.pwdDonotMatch = true; } else $scope.pwdDonotMatch = false; }

Answer 2

为什么需要拨打ng-change？

使用ng-model，您的范围始终是当前输入值，因此您可以通过ng-if="password1 !== password2"

进行操作

例如：

<div ng-app ng-controller="PasswordCtrl">

    <input type="password" id="inputPassword1"   name="Password" class="form-control" ng-model="password" placeholder="Password" required />

    <span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span>

    <input type="password" id="inputPassword" class="form-control"name="password" ng-model="reenter_password"  placeholder="Confirm Password" required />

    <span ng-if="password !== reenter_password"> 
        <span style="color:red">Passwords don't match.</span> 
    </span>
</div>

您的控制器就是这样：

function PasswordCtrl($scope) {
    $scope.password = "";
    $scope.reenter_password = "";
}

请参阅我已使用您的代码创建的jsfiddle example。

如何在AngularJs中进行反向密码验证

2 个答案: