Question

请检查这个小提琴 - https://jsfiddle.net/Ayyappu/1eh28db6/

<body ng-app="app">
    <form name="form" ng-submit="form.$valid && vm.login()" novalidate>
        <div class="form-group" ng-class="{ 'has-error': form.$submitted && form.password.$invalid }">
            <label for="password">Password</label>
            <input type="password" name="password" class="form-control" ng-model="vm.password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,15}" />
            <div ng-messages="form.$submitted && form.password.$error" class="help-block">
                <div ng-message="required">Password is required</div>
                <div ng-message="pattern">Invalid format</div>
            </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.$submitted && form.confirmPassword.$invalid }">
            <label for="confirmPassword">Confirm Password</label>
            <input type="password" name="confirmPassword" class="form-control" ng-model="vm.confirmPassword" required compare-to="vm.password" />
            <div ng-messages="form.$submitted && form.confirmPassword.$error" class="help-block">
                <div ng-message="required">Confirm Password is required</div>
                <div ng-message="compareTo">Passwords don't match</div>
            </div>
        </div>
        <div class="form-group">
            <button ng-disabled="vm.loading" class="btn btn-primary">Login</button>
        </div>                        
    </form>
</body>


var app = angular.module('app', ['ngMessages']);

app.directive("compareTo", function() {
    return {
      require: "ngModel",
      scope: {
        otherModelValue: "=compareTo"
      },
      link: function(scope, element, attributes, ngModel) {

        ngModel.$validators.compareTo = function(modelValue) {
          return modelValue == scope.otherModelValue;
        };

        scope.$watch("otherModelValue", function() {
          ngModel.$validate();
        });
      }
    };
  });

第一个文本框中的验证（密码）

强制性
密码必须包含至少1个小写，1个大写，1个数字，1个特殊字符，其长度应介于8到15之间

第二个文本框中的验证（确认密码）

强制性
它应与第一个文本框（密码）

问题：

强制验证在两个文本框中都正常工作。密码策略在第一个文本框（密码）中也正常工作。但是，仅当第一个文本框（密码）通过验证时，第二个文本框（确认密码）中的密码匹配验证才有效。

例如，'Ab1！efgh'是有效密码。如果在两个文本框中都输入此内容，则表单中没有验证错误。但是，如果您在第一个文本框（密码）和第二个文本框（确认密码）中只输入'a'，则第二个文本框（确认密码）中的错误表示密码不匹配。这清楚地表明'确认密码验证仅在密码字段有效时才起作用'

即使您在第一个文本框（密码）中输入的密码无效，我希望第二个文本框（确认密码）中的密码匹配验证能够正常工作。

请帮忙。

Answer 1

默认情况下，如果vm.password失败，ng-model将不会更新pattern。

如果模式有效失败，则必须使用ng-model-options="{allowInvalid: true}"来允许值更改。

请参阅此plunker

AngularJS - 仅当密码字段有效时，确认密码验证才有效

1 个答案: