【发布时间】：2017-03-31 02:27:15
【问题描述】：
请检查这个小提琴 - 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”，则第二个文本框（确认密码）中会出现错误，提示密码不匹配。这清楚地表明“确认密码验证仅在密码字段有效时才有效”
即使您在第一个文本框（密码）中输入的密码无效，我也希望第二个文本框（确认密码）中的密码匹配验证能够正常工作。
请帮忙。
【问题讨论】：
-
However, the password match validation in the second textbox (Confirm Password) is working only if the first textbox (Password) passes validation.... 不，我检查了 jsfiddle，它的行为符合预期。我错过了什么？如果您单击提交并在第二个输入中键入内容，即使第一个输入无效，文本也会从Confirm Password is required更改为Passwords don't match。 -
请在两个文本框中只输入“a”并提交。第一个 texbox 中的验证应该是“无效格式”，第二个文本框不应该有任何错误。但是，第二个文本框显示“密码不匹配”。
-
那么，预期的行为是什么？如果第一个输入无效，则不验证密码匹配（当第一个复选框是有效密码时验证密码是否匹配）??
-
无论密码有效性如何，我都希望密码匹配能够正常工作。
-
这是 (jsfiddle.net/dgycxszx) 你想要的行为吗？
标签： angularjs validation ng-messages