如何使用AngularJS中的另一个输入更改密码验证？

Posted 2023-05-09

【中文标题】如何使用AngularJS中的另一个输入更改密码验证？

【英文标题】：How to change validation of password with another input in AngularJS?

【发布时间】：2017-08-14 16:30:57

【问题描述】：

我有 3 个这样的输入：

<div class="form-group">

        <label for="username">Username</label>
        <input type="text" 
                ng-model="formModel.username" 
                class="form-control" 
                id="username" 
                name="username"
                required>

                <span class="help-block" 
                      ng-show="myForm.username.$error.required && myForm.username.$dirty">
                      Required
                </span>

    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" 
               class="form-control"
                id="password" 
                name="password" 
                ng-model="formModel.password" 
                required
                valid-my-password>

        <span class="help-block" 
              ng-show="myForm.password.$error.required && myForm.password.$dirty">
               Required
        </span>
        <span class="help-block" 
            ng-show="!myForm.password.$error.required && 
            myForm.password.$error.sameAs && myForm.password.$dirty || myForm.username.$dirty">
            Username and password are similar
        </span>

    </div>
    <div class="form-group">

       <label for="password_c">Approve password</label>
       <input type="password" 
       class="form-control" 
       id="password_c" 
       name="password_c" 
       ng-model="formModel.password_c" 
       required
       valid-password-c />

       <span class="help-block" 
       ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">
            You need to approve the password
       </span>

       <span class="help-block" 
       ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
       myForm.password.$dirty">
        Passwords don't match
       </span>
    </div>

验证效果很好。但： 1.如果密码与用户名相似，我尝试更改用户名，警报不会消失。 2.如果密码和确认密码输入都填好了，验证正常，我正在尝试修改密码，“密码不匹配”的提示不显示。

jsFiddle

【参考方案1】：

只需使用下面的 sn-ps 更改您的错误验证

<span class="help-block" ng-show="!myForm.password.$error.required && 
            myForm.password.$error.sameAs && myForm.password.$dirty && formModel.password==formModel.username">
            Username and password are similar
        </span>

<span class="help-block" ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
       myForm.password.$dirty && formModel.password_c!=formModel.password">
        Passwords don't match
       </span>

这是你的小提琴的更新链接

http://jsfiddle.net/vz215k94/

【讨论】：

出现错误，但输入仍然无效，我已添加视图以查看属性jsfiddle.net/odedtaizi/vz215k94/2

输入什么时候失效？

当他与用户名相同时，或与确认输入不匹配时。它需要在指令中进行更改。

【参考方案2】：

我找到了答案。我添加了另一个名为“validMyUsername”的指令，并从用户名输入中调用他。在此指令中，我更改了密码验证。 对于确认密码，我在密码指令中更改了验证。 像这样：

用户名输入指令：

...
directive('validMyUsername', function () 

return 
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) 
        ctrl.$parsers.unshift(function (viewValue, $scope) 
            var sameAs = viewValue != scope.myForm.password.$viewValue

            scope.myForm.password.$setValidity('sameAs',sameAs);
            ctrl.$setValidity('sameAs',sameAs);

            return viewValue;
        )
    

密码指令：

...
directive('validMyPassword', function () 

return 
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) 
        ctrl.$parsers.unshift(function (viewValue, $scope) 
              var sameAs = viewValue != scope.myForm.username.$viewValue
              var noMatch = viewValue != scope.myForm.password_c.$viewValue

            scope.myForm.password_c.$setValidity('noMatch',!noMatch);
            ctrl.$setValidity('sameAs', sameAs)

            return viewValue;
        )
    

)

这里是完整的例子：jsFiddle