堆棧內存溢出
  簡體   English   中英

AngularJS確認密碼驗證

[英]AngularJS confirmation password validations

 原文  2017-07-03 06:06:15  5   1    javascript/ css/ angularjs/ html5/ dom

問題描述

在這里，我面臨有關以下指定的第三點的問題（當用戶更改密碼值時）。

  • 測試場景：
    1. 用戶正確輸入所有字段-[ Button Enabled ]
    2. 如果密碼字段無效（因為它不符合密碼強度），則create an account按鈕處於禁用模式。
    3. 如果用戶更改密碼值，但密碼字段有效。 例：[ Yash@123到Yash@1234 ]此處的確認字段值為Yash@123 。 然后按鈕應處於禁用模式。

在此處輸入圖片說明

我已經通過訪問Parent Scope進行了測試，像這樣在兩個指令之間的Scope值。 

function okPasswordDirective() {
    $element.on('blur change keydown', function( evt ) {
        if( ngPasswordModel.$valid ) {
            $scope.passwordVal = ngPasswordModel.$viewValue;
            console.log('Updated Val : ', $scope.passwordVal);
            $scope.updatePass();
        }
    }
}

function compareToDirective() {
    //use scope.$parent to associate the function called to directive function
    scope.$parent.updatePass = function() {
        console.log('$watch « Password Element Watcher.')
        console.log('Pswd: ',scope.$parent.passwordVal, '\t Cnfirm:', ngModel.$modelValue);
        //scope.registerForm.confirm.$invalid = true;
    }
}

在這里，在updatePass() function未收到密碼的最后提交值。 當我單擊“確認”字段時，它就過去了。 但沒有用，我無法通過使confirm field as invalid來禁用按鈕。 

var pswd = angular.element(document.getElementById('password')).scope().registerForm.password;
var cnfm = angular.element(document.getElementById('confirmedID')).scope().registerForm.confirm;
console.log('PSWD:', pswd, '\n CNFM:', cnfm);
console.log('Diff : ', pswd.$viewValue != cnfm.$viewValue);

if( pswd.$viewValue != cnfm.$viewValue ) {
    console.log('Result : ', (pswd.$dirty && cnfm.$dirty && cnfm.$valid && ( pswd.$viewValue != cnfm.$viewValue ) ) ? 'error' : 'noErr');
    cnfm.$invalid = true;
}

登記表代碼： fiddle 

<!-- HTML CODE -->
<body ng-app="loginModule">

 <div class="main-container">
  <div class="form-container">

   <h2 class="form-label">Sign Up</h2>
    <div class="form-container" data-ng-controller="registerController" >
        <form name="registerForm" role="form" data-ng-submit="formSubmit()">
            <div class="form-group"><!-- Display Name -->
                <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-6  left">
                  <div class="error form-hint" 
                    data-ng-show="registerForm.firstname.$dirty && registerForm.firstname.$error.required" 
                    data-ng-cloak>{{"This field is required."}}
                    </div>
                    <input type="text" class="form-control" name="firstname" placeholder="First name" 
                    data-ng-class="(registerForm.firstname.$dirty && registerForm.firstname.$invalid) ? 'error' : ''"
                    data-ng-required="true" data-ng-model="firstName">
                  </div>

                  <div class="col-md-6 col-sm-6 col-xs-6  right">
                    <div class="error form-hint" 
                    data-ng-show="registerForm.lastname.$dirty && registerForm.lastname.$error.required" 
                    data-ng-cloak>{{"This field is required."}}
                    </div>
                    <input type="text" class="form-control" name="lastname" placeholder="Last name" 
                    data-ng-class="(registerForm.lastname.$dirty && registerForm.lastname.$invalid) ? 'error' : ''"
                    data-ng-required="true" data-ng-model="lastName">
                    </div>
                  </div>
                </div>
                </div>
            </div>

            <div class="form-group">
                <div class="error form-hint" 
                data-ng-show="registerForm.username.$dirty && registerForm.username.$error.required" 
                data-ng-cloak>{{"This field is required."}}
                </div>

                <input type="text" class="form-control" id="userid" name="username" placeholder="User name" 
                data-ng-class="(registerForm.username.$dirty && registerForm.username.$invalid) ? 'error' : ''"
                data-ng-required="true" data-ng-model="username">
            </div>

            <div class="form-group">
                <div class="error form-hint" 
                data-ng-show="registerForm.email.$dirty && registerForm.email.$error.required" 
                data-ng-cloak>{{"You can't leave this empty."}}
                </div>
                <div class="error form-hint" 
                data-ng-show="registerForm.email.$dirty && registerForm.email.$error.email" 
                data-ng-cloak>{{"The email address you provided isn't valid"}}</div>

                <input type="email" class="form-control" id="emailid" name="email" placeholder="Email address" 
                data-ng-class="(registerForm.email.$dirty && registerForm.email.$invalid) ? 'error' : ''"
                data-ng-required="true" data-ng-model="email77">
            </div>

            <div class="form-group">
                <div class="form-hint">
                To conform with our Strong Password policy,
                Use at least one letter, one numeral, one special character, and seven characters.
                </div>

                <input type="text" class="form-control" data-ok-password-directive
                id="password" name="password" placeholder="Password" data-ng-required="true" 
                data-ng-class="(registerForm.password.$dirty && registerForm.confirm.$dirty 
                && registerForm.confirm.$valid &&
                ( registerForm.password.$viewValue != registerForm.confirm.$viewValue ) ) ? 'error' : ''"
                data-ng-model="passwordModel">

                <div class="label password-count" 
                data-ng-class="passwordModel.length > 7 ? 'label-success' : 'label-danger'" 
                data-ng-cloak>{{ passwordModel | passwordCountFilter }}</div>

                <div class="strength-meter">
                    <div class="strength-meter-fill" data-strength="{{myModulePasswordMeter}}"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="error form-hint" 
                data-ng-show="registerForm.confirm.$dirty && !registerForm.confirm.$empty && registerForm.confirm.$error.required" 
                data-ng-cloak>{{"You can't leave this empty."}}
                </div>
                <div class="error form-hint" 
                data-ng-show="registerForm.confirm.$dirty && registerForm.confirm.$invalid && !registerForm.confirm.$error.required" 
                data-ng-cloak>{{"These passwords don't match. Try again?"}}</div>

                <div class="error form-hint" data-ng-show="
                ( registerForm.confirm.$dirty && registerForm.confirm.$valid && !registerForm.confirm.$invalid) && 
                ( registerForm.password.$modelValue != registerForm.confirm.$modelValue )" data-ng-cloak>
                {{'Password mismatch'}}
                </div>

                <!-- Enter to Confirm password | Enter for Password confirmation -->
                <input type="text" class="form-control" id="confirmedID" name="confirm"
                placeholder="Password confirmation" 
                data-ng-required="true" data-ng-model="confirm77"
                data-ng-class="(registerForm.confirm.$dirty &&
                ( registerForm.confirm.$invalid || 
                ( registerForm.password.$modelValue != registerForm.confirm.$modelValue ) ) ) ? 'error' : ''" 
                data-compare-to="registerForm.password" >
            </div>
            <button id="siginButton" type="submit" class="btn" data-ng-disabled="registerForm.$invalid">Create an account</button>

        </form>
    </div>

  </div>
 </div>
</body>

腳本代碼： 

(function() {

  var loginModule = angular.module('loginModule', []);
  loginModule.constant('USERCONSTANTS', (function() {
    return {
        PASSWORD_LENGTH: 7
    }
  })());

  loginModule.controller('registerController', ['$scope','$http', '$window', '$location', registerControllerFun]);
  function registerControllerFun($scope, $http, $window, $location) {
    console.log(' registerControllerFun...');
  }
  loginModule.factory('myfactory', [function() {
    return {
        score: function() {
            //console.log('arguments List : ', arguments);
            var score = 0, value = arguments[0], passwordLength = arguments[1];
            var containsLetter = /[a-zA-Z]/.test(value), containsDigit = /\d/.test(value), containsSpecial = /[^a-zA-Z\d]/.test(value);
            var containsAll = containsLetter && containsDigit && containsSpecial;

            console.log(" containsLetter - ", containsLetter,
                    " : containsDigit - ", containsDigit,
                    " : containsSpecial - ", containsSpecial);

            if( value.length == 0 ) {
                score = 0;
            } else {
                if( containsAll ) {
                    score += 3;
                } else {
                    if( containsLetter ) score += 1;
                    if( containsDigit ) score += 1;
                    if( containsSpecial ) score += 1;
                }
                if(value.length >= passwordLength ) score += 1;
            }
            /*console.log('Factory Arguments : ', value, " « Score : ", score);*/
            return score;
        }
    };
  }]);

  loginModule.directive('okPasswordDirective', ['myfactory', 'USERCONSTANTS', function(myfactory, USERCONSTANTS) {
    return {
        restrict: 'AC',
        // use the NgModelController
        require: 'ngModel',

        // add the NgModelController as a dependency to your link function
        link: function($scope, $element, $attrs, ngPasswordModel) {
            console.log('Directive - USERCONSTANTS.PASSWORD_LENGTH : ', USERCONSTANTS.PASSWORD_LENGTH);

            $element.on('blur change keydown', function( evt ) {
                $scope.$evalAsync(function($scope) {
                    var pwd = $scope.password = $element.val();

                    $scope.myModulePasswordMeter = pwd ? (pwd.length > USERCONSTANTS.PASSWORD_LENGTH 
                            && myfactory.score(pwd, USERCONSTANTS.PASSWORD_LENGTH) || 0) : null;
                    ngPasswordModel.$setValidity('okPasswordController', $scope.myModulePasswordMeter > 3);
                });
                if( ngPasswordModel.$valid ) {
                    $scope.passwordVal = ngPasswordModel.$viewValue;
                    console.log('Updated Val : ', $scope.passwordVal);
                    $scope.updatePass();
                }
            });
        }
    };
  }]);

  loginModule.filter('passwordCountFilter', [ function() {
    var passwordLengthDefault = 7;
    return function( passwordModelVal ) {
        passwordModelVal = angular.isString(passwordModelVal) ? passwordModelVal : '';
        var retrunVal = passwordModelVal && 
            (passwordModelVal.length > passwordLengthDefault ? passwordLengthDefault + '+' : passwordModelVal.length);
        return retrunVal;
    };
  } ]);

  var compareTo = function() {
    return {
        require: "ngModel",
        // directive defines an isolate scope property (using the = mode) two-way data-binding
        scope: {
            passwordEleWatcher: "=compareTo"
        },

        link: function(scope, element, attributes, ngModel) {
            console.log('Confirm Password Link Function call.');

            var pswd = scope.passwordEleWatcher;

            ngModel.$validators.compareTo = function( compareTo_ModelValue ) {
                //console.log('scope:',scope);

                if( (pswd != 'undefined' && pswd.$$rawModelValue != 'undefined') && (pswd.$valid && pswd.$touched) ) {
                    var pswdModelValue = pswd.$modelValue;
                    var isVlauesEqual = ngModel.$viewValue == pswdModelValue;
                    return isVlauesEqual;
                } else {
                    console.log('Please enter valid password, before conforming the password.');
                    return false;
                }
            };

            scope.$watch("passwordEleWatcher", function() {
                console.log('$watch « Confirm-Password Element Watcher.')
                ngModel.$validate();
            });

            scope.$parent.updatePass = function() {
                console.log('$watch « Password Element Watcher.')
                console.log('Pswd: ',scope.$parent.passwordVal, '\t Cnfirm:', ngModel.$modelValue);
                //scope.registerForm.confirm.$invalid = true;
            }
        },
    };
  };
  loginModule.directive("compareTo", compareTo);
})(window.angular);

任何幫助將不勝感激。

觀察到的CSS classes ： 

ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required form-control ng-isolate-scope ng-invalid-compare-to
ng-pristine ng-touched ng-empty ng-invalid ng-invalid-required form-control ng-isolate-scope ng-invalid-compare-to

ng-dirty ng-valid-parse ng-touched ng-not-empty ng-invalid ng-valid-required error form-control ng-isolate-scope ng-invalid-compare-to
ng-dirty ng-valid-parse ng-touched ng-empty ng-invalid ng-valid-required error form-control ng-isolate-scope ng-invalid-compare-to

ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required form-control ng-isolate-scope ng-valid-compare-to

我只想將css值從ng-valid更改為ng-invalid

1 個解決方案

解決方案1
 0 已采納  2017-07-13 08:58:25

剛剛在ng-disabled - Directive Button - Directive中添加了表達式 [ To evaluate equality of password and conformation password ]。

代碼« Updated Fiddle 

<button id="siginButton" type="submit" class="btn" data-ng-disabled="registerForm.$invalid">
Create an account
</button>

<!-- Changed to -->

<button id="siginButton" type="submit" class="btn"
    data-ng-disabled="registerForm.$invalid 
    || ( registerForm.confirm.$dirty && registerForm.confirm.$valid && !registerForm.confirm.$invalid )
    && ( registerForm.password.$modelValue != registerForm.confirm.$modelValue )">
Create an account
</button>

使用驗證消息確認密碼字段。

  • 您不能將其留空。
  • 使用我們的“ Strong Password Policy確認密碼。
  • 這些密碼不匹配。 再試一次？

解決方案：

  1. 當密碼字段無效時，禁用“ Conformation Password”字段。 Updated Fiddle

  2. 用戶ng-pattern屬性進行確認。 Updated Fiddle

范例 ： 

<form name="registerForm" role="form" data-ng-submit="formSubmit()">
    Password:<input type="password" name="password" ng-model="password77">
    ConfirmPassword:<input type="password" name="confirm" ng-model="confirm77" ng-pattern="emailReg">

    <div class="error form-hint" ng-messages="registerForm.confirm.$error" data-ng-show="registerForm.confirm.$dirty">
        <p ng-show="registerForm.confirm.$error.required" ng-message="required">{{"You can't leave this empty."}}</p>
        <p ng-show="!(registerForm.confirm.$error.pattern && registerForm.confirm.$error.required) && registerForm.password.$invalid && !registerForm.confirm.$invalid" ng-message="pattern">{{"Confirm Password with our strong password policy!"}}</p>
        <p ng-show="registerForm.confirm.$invalid && !registerForm.confirm.$error.required && registerForm.confirm.$error.pattern" ng-message="">{{"These passwords don't match. Try again?"}}</p>
    </div>
</form>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 ember，ember-validations匹配密碼和確認 AngularJS密碼確認noMatch有效，但是表單無效$$？ Javascript 密碼驗證 Angularjs自定義指令驗證 angularjs中的表單驗證 AngularJS驗證不起作用？ 如何在Angularjs中使用驗證？ JavaScript驗證后提交表單的確認消息 JavaScript 密碼和密碼確認匹配 角度2確認密碼
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM