Javascript 验证时使另一个字段无效

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

我添加了一个验证密码的指令，但现在我希望，如果两个字段之间不相等，则使两个字段都无效，而不仅仅是我正在键入的字段。我可以这样做吗

我尝试在两个ngmodels上调用$setValidity，但我找不到从一个ctrl.$parsers.unshift或directive link函数调用$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>

密码
(*)
重复密码
(*)

当其中一个字段发生更改时，如何验证这两个字段

---

非常感谢

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

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>

密码
(*)
重复密码
(*)

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

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>

密码
(*)
重复密码
(*)

请检查这把小提琴

你可以这样做

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

if(password==reenteredpassword)
{
$("#required").html("Passwords Match");
}
else
{
$("#required").html("Passwords do not Match");
}

请检查一下这把小提琴

你可以这样做

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

if(password==reenteredpassword)
{
$("#required").html("Passwords Match");
}
else
{
$("#required").html("Passwords do not Match");
}

---

Angular UI有一个内置的验证器，您可以在各种用途中使用，这里有一个密码和确认密码的确切示例，您可以检查：

---

Angular UI有一个内置的验证器，您可以在各种用途中使用，这里有一个密码和确认密码的确切示例，您可以检查：

---

这个答案与AngularJSYes无关，但这个问题有一个javascript标记！？感谢您的回答和@vignesh示例，但我尝试使用角度验证。此答案与AngularJSYes无关，但问题有一个javascript标记！？感谢您的回答和示例@vignesh，但我尝试使用角度验证。fernaramburu，不太确定，但在我的案例中效果很好。kazimanzurrashid，非常感谢您的回答，但这个示例不起作用：）什么不起作用？选中[此处]（），转到验证区域并尝试以下步骤：1）在第一个密码字段中键入“hello”；2）在第二个密码字段中键入“hello”（一切正常！）3）在第二个密码字段中添加“d”，这样您就有了“hellod”4）在第一个密码字段中添加“d”，这样您也会出现“hellod”错误！我没发现他们是平等的！这就是为什么我在寻找替代方案。对不起，我重新编辑了评论，因为我忘记了第4步。请在包含步骤4的情况下重试。您完全正确，刚刚发现问题。打开了一个问题：fernaramburu，不太确定，但它在我的情况下工作得很好。kazimanzurrashid，非常感谢你的回答，但问题是这个例子不起作用：）什么不起作用？选中[此处]（），转到验证区域并尝试以下步骤：1）在第一个密码字段中键入“hello”；2）在第二个密码字段中键入“hello”（一切正常！）3）在第二个密码字段中添加“d”，这样您就有了“hellod”4）在第一个密码字段中添加“d”，这样您也会出现“hellod”错误！我没发现他们是平等的！这就是为什么我在寻找替代方案。对不起，我重新编辑了评论，因为我忘记了第4步。请在包含步骤4的情况下重试。您完全正确，刚刚发现问题。打开一个问题：