0

我正在处理一个标准的“更改密码”表单，其中有两个字段：password1 和 password2。这两个字段只是为了验证用户输入了正确的密码并且它们需要包含相同的文本。

我添加了一个验证密码的指令，但现在我想要，如果两个字段彼此不相等，则使这两个字段无效，而不仅仅是我输入的那个。我可以这样做吗？

我尝试在两个 ngmodel 上调用 $setValidity，但我没有找到从一个 ctrl.$parsers.unshift 或指令链接函数调用 $setValidity 或我当前未验证的其他字段的方法。我真的迷路了。。

非常感谢！

我的指令是：

myApp.directive('validatepassword', function () {
    return {
        require: 'ngModel',
        restrict: 'A', // only activate on element attribute
        link: function (scope, elm, attrs, ngModel) {
            ngModel.$parsers.unshift(function (viewValue) {
                var valPasswordValue = attrs.validatepassword;
                var otherPassword = $('#' + valPasswordValue)[0].value;
                var valido = scope.validatePassword(viewValue, otherPassword);
                ngModel.$setValidity('password', valido);
                return viewValue;
            });
        }
    };
});

我在代码中以这种方式使用：

        <div class="control-group">
            <label class="control-label" for="inputPassword1">Password</label>
            <div class="controls">
                <input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required validatepassword="inputPassword2"/>
                <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputPassword2">Repeat Password</label>
            <div class="controls">
                <input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required validatepassword="inputPassword1"/>
                <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
            </div>
        </div>

关于如何在其中一个字段更改后立即验证这两个字段的任何想法？

非常感谢！

4

3 回答 3

3

要从另一个字段中的一个字段触发验证方法，我必须手动设置另一个字段的值。您可以在 ng-change 中执行此操作：

ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"

当您这样做时，它应该在两个密码字段中触发验证。

您还可以像这样访问指令中的字段：

scope.addEditForm.inputPassword1

因此，您可以摆脱指令中的 jQuery 访问。

以下是用于两个字段的密码验证的 HTML 部分：

<div class="control-group">
    <label class="control-label" for="inputPassword1">Password</label>

    <div class="controls">
        <input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required
               validatepassword="inputPassword2" ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"/>
        <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputPassword2">Repeat Password</label>

    <div class="controls">
        <input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required
               validatepassword="inputPassword1" ng-change="addEditForm.inputPassword1.$setViewValue(addEditForm.inputPassword1.$viewValue)"/>
        <span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
    </div>
</div>
于 2013-06-14T06:30:06.010 回答
2

Angular-UI 有一个内置的验证器，您可以将其用于各种目的，有一个密码和确认密码的确切示例，您可以检查： https ://github.com/angular-ui/ui-utils/blob/主/模块/验证/演示/index.html#L29

于 2013-06-14T08:50:55.287 回答
1

请检查这个小提琴 http://jsfiddle.net/vigneshvdm/Dnt7w/5/

你可以做这样的事情

var password=$("#telephone").val();
var reenteredpassword=$("#mobile").val();

if(password==reenteredpassword)
{
$("#required").html("Passwords Match");
}
else
{
$("#required").html("Passwords do not Match");
}
于 2013-06-14T08:15:43.427 回答