0

ここでは、password1 と password2 の 2 つのフィールドがある標準の「パスワードの変更」フォームを扱っています。これらの 2 つのフィールドは、ユーザーが正しいパスワードを入力したことを検証するためのものであり、同じテキストが含まれている必要があります。

パスワードを検証するためのディレクティブを追加しましたが、両方のフィールドが互いに等しくない場合、入力しているフィールドだけでなく、両方のフィールドが無効になるようにしたいのですが、できますか?

両方の ngmodels で $setValidity を呼び出そうとしましたが、1 つの 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/ master/modules/validate/demo/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 に答える