代码之家  ›  专栏  ›  技术社区  ›  Peter Pik

验证已提交或脏的密码字段[重复]

  •  0
  • Peter Pik  · 技术社区  · 8 年前

    我已经创建了以下控制器和表单,并实现了几个验证规则。然而,我似乎找不到最好的方法来确保 confirm_password 等于 password ?

    html

    <div class="col-md-5" ng-controller="RegisterController as vm">
        <form id="sign_up" name="SignUp" ng-submit="vm.register(SignUp)" novalidate>
            <div class="box_form">
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" class="form-control" name="email" ng-model="vm.email" placeholder="Din email" required>
                    <p ng-show="(SignUp.email.$error.email || SignUp.email.$error.required) && (SignUp.terms.$dirty || vm.submitted)" class="help-block ng-binding"
                        style="">Email er invalid.</p>
                </div>
                <div class="form-group">
                    <label>Brugernavn</label>
                    <input type="text" class="form-control" name="username" ng-model="vm.username" ng-minlength="3" ng-maxlength="14" placeholder="Dit brugernavn"
                        required>
                    <p ng-show="SignUp.username.$error. && (SignUp.username.$dirty || vm.submitted)" class="help-block ng-binding" style="">Brugernavn er invalid.</p>
                </div>
                <div class="form-group">
                    <label>Adgangskode</label>
                    <input type="password" class="form-control" name="password" ng-model="vm.password" ng-minlength="6" ng-maxlength="24" placeholder="Din adgangskode"
                        required>
                    <p ng-show="SignUp.password.$error && (SignUp.password.$dirty || vm.submitted)" class="help-block ng-binding" style="">Adgangskode er invalid.</p>
                </div>
                <div class="form-group">
                    <label>Adgangskode bekræftelse</label>
                    <input type="password" class="form-control" name="confirm_password" ng-model="vm.confirm_password" ng-minlength="6" ng-maxlength="24"
                        ng-model="vm.confirm_password" placeholder="Bekræft din adgangskode" required>
                    <p ng-show="(SignUp.confirm_password.$dirty || vm.submitted)" class="help-block ng-binding">Adgangskoderne er ikke ens.</p>
                </div>
                <div class="checkbox-holder text-left">
                    <div class="checkbox_2">
                        <input type="checkbox" value="accept" id="check_2" name="terms" ng-model="terms" required>
                        <label for="check_2">
                            <span>I Agree to the
                                <strong>Terms &amp; Conditions</strong>
                            </span>
                        </label>
                    </div>
                </div>
                <!-- validation -->
                <p class="alert alert-danger text-center" ng-show="SignUp.terms.$error.required && (SignUp.terms.$dirty || vm.submitted)">Accepter vilkår og betingelser.</p>
    
                <div class="form-group text-center add_top_30">
                    <button class="btn_1" id="sign_up_btn" type="submit">Opret</button>
                </div>
            </div>
    
        </form>
    </div>
    

    控制器

    (function () {
      'use strict';
    
      angular
        .module('KryptoApp')
        .controller('RegisterController', RegisterController);
      RegisterController.$inject = ['$location', '$scope', 'Authentication'];
    
      function RegisterController($location, $scope, Authentication) {
        var vm = this;
    
        vm.register = register;
    
        function register(form) {
          vm.submitted = true;
          if(form.$valid) {
            Authentication.register(vm.email, vm.password, vm.confirm_password, vm.username);
          }
        }
    
    
      }
    
    })();
    
    1 回复  |  直到 8 年前
        1
  •  0
  •   thomasiuz    8 年前

    我认为你应该为这种情况制定一个指令:

    var 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();
            });
        }
    };};
    

    单元指令(“compareTo”,compareTo);

    然后在html中:

    <input type="password" name="confirmPassword" 
        ng-model="registration.user.confirmPassword"
        required 
        compare-to="registration.user.password" />
    
    <div ng-messages="registrationForm.confirmPassword.$error"
      ng-messages-include="messages.html"></div>