Question

我使用Angular JS创建了一个更改密码页面，该页面有3个字段 - 1.旧密码 2.新密码 3.确认新密码

我试图强加的验证是 - 1.用户打开表单并直接点击提交，无需点击任何地方。这应该触发所有3种输入类型的所有3条错误消息。 2.密码是针对正则表达式验证的，无法触发哪个错误消息。 3.新密码和确认密码应匹配。

我面临的问题是 - 假设我在旧密码中输入2位数字，按一个标签转到新密码，旧密码前面会显示错误信息。类似地，如果我在新密码中输入2位数并按Tab键导航到确认新密码，则会触发错误消息。但如果我尝试使用无效输入从下到上填写表单，则错误消息仅在我到达时触发顶部输入元素，即旧密码

我创建的2个指令是 -

     .directive('passwordValidate', ['regularExpression', function (regex) {
     return {
         require: 'ngModel',
         link: function (scope, elm, attrs, ctrl) {
             elm.unbind('keydown').unbind('change');
             elm.bind('blur', function (viewValue) {
                 scope.$apply(function () {
                     if ((regex.PASSWORD).test(viewValue.target.value)) {
                         // it is valid
                         ctrl.$setValidity('passwordValidate', true);
                         return viewValue;
                     } else {
                         // it is invalid, return undefined (no model update)
                         ctrl.$setValidity('passwordValidate', false);
                         return undefined;
                     }
                 });
             });
         }
     };
 }])
.directive('passwordMatch', function($parse) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            elm.unbind('keydown').unbind('change');
            elm.bind('blur', function (viewValue) {
                scope.$watch(function () {
                    return $parse(attrs.passwordMatch)(scope) === ctrl.$modelValue;
                }, function (currentValue) {
                    ctrl.$setValidity('passwordMismatch', currentValue);
                });
            });
        }
    };
});

我为同一个创建了一个JS小提琴 - http://jsfiddle.net/achyut/Z367L/18/

我担心我对事件做错了（模糊，变化）

Answer 1

您的表达式似乎显示/隐藏了错误消息。看看最后一个：

<span class="ui-state-error h5-message" ng-show="(_ServerForm.oldpassword.$dirty && _ServerForm.newpasswordconfirm.$error.passwordValidate) || (blankSubmit && _ServerForm.newpasswordconfirm.$invalid)">
    <span class="h5-arrow"></span>
    <span class="h5-content">Please type confirm new password</span>
</span>

在这里检查_ServerForm.oldpassword.$dirty，因此在更改旧密码字段之前不会显示错误消息。如果您删除此项检查或使用_ServerForm.newpasswordconfirm.$dirty，那么一切都会正常工作。

同样的故事也适用于newpassword字段。

Answer 2

在您提供的小提示中，我可以看到显示新密码错误消息的逻辑或条件取决于旧密码字段是否脏。（_ ServerForm.oldpassword。$ dirty）

<span class="ui-state-error h5-message" ng-show="(_ServerForm.oldpassword.$dirty && _ServerForm.oldpassword.$error.passwordValidate) || (blankSubmit && _ServerForm.oldpassword.$invalid)">

更改密码角度实现验证不起作用

2 个答案: