Question

我正在尝试匹配两个文本字段密码，看起来像这样：

pwCheck.js

angular.module('installApp')
.directive('pwCheck', function ($http) {
  return {
   require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      var firstPassword = '#' + attrs.pwCheck;
        elem.add(firstPassword).on('keyup', function () {
          scope.$apply(function () {
                ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
            });
        });
      }
   }
});

accounts.html

<label>{{label.password}}</label>
   <input type="password"  class="form-control" id="pw1" name="pw1"  ng-model-options="{updateOn:'blur'}" ng-model="user.password" required ></input>

<label>{{label.retypePassword}}</label>
   <input type="password" class="form-control" id="pw2" name="pw2" ng-model-options="{updateOn:'blur'}" ng-model="pw2" ng-required="" pw-check="pw1"></input>

<div class="msg-block" ng-show="signupform.$error"><img src = "./images/error-icon.png" width = "25" height = "25" ng-show="signupform.pw2.$error.pwmatch"></img><span class="msg-error" ng-show="signupform.pw2.$error.pwmatch">Passwords don't match.</span></div>

上面的代码正如预期的那样正常工作，但却给用户带来了糟糕的体验。之所以发生这种情况，是因为当我在第一个文本字段中输入消息＆＃34;密码不匹配＆＃34;即使用户没有完成打字也会显示。

问题是在用户完成输入之前验证发生得太快。

我试图通过添加ng-model-options="{updateOn:'blur'}"来解决此问题，但问题仍然存在。

帮助！提前致谢

Answer 1

使用模糊而不是按键。请尝试以下方法：

angular.module('installApp')
.directive('pwCheck', function ($http) {
  return {
   require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      var firstPassword = '#' + attrs.pwCheck;
        elem.on('blur', function () {
          scope.$apply(function () {
                ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
            });
        });
      }
   }
});

注意：删除了elem上的添加方法。将抛出错误，因为没有在元素上定义添加方法。

Angularjs：匹配密码的速度太快了吗？

1 个答案: