AngularJS

Question

请检查此 fiddle - 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'，则第二个文本框（确认密码）中会出现错误，提示密码不匹配。这清楚地表明 'Confirm password validation is working only if Password field is valid'

即使您在第一个文本框（密码）中输入的密码无效，我也希望在第二个文本框（确认密码）中进行密码匹配验证。

请帮忙。

Answer 1

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

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

看到这个plunker

AngularJS - 确认密码验证仅在密码字段有效时有效

AngularJS - Confirm password validation is working only if Password field is valid

validation

ng-messages