如何在Angular JS中的某些条件下验证特定输入字段而不是整体形式

时间:2018-09-29 07:53:35

标签: angularjs angularjs-directive

此处为必填移动字段的时间 清空,然后输入与要求匹配的密码,然后仍然通过手机验证并接受表格。如何解决此问题,只验证密码字段,而不验证整个表单。我提到了帖子数量,但无法解决。怎么可以在这里完成。

JS指令:-

;(function () {
  'use strict';

  angular
  .module('Components')
  .directive('passwordRules', passwordRules);

  function passwordRules () {
    var directive = {
      restrict: 'E',
      replace: true,
      scope: {
        password: '=',
        formName: '='
      },
      templateUrl: 'app/components/password_rules/password_rules.template.html',
      controller: PasswordRulesCtrl,
      controllerAs: 'vm',
      bindToController: true
    };

    return directive;
  }

  /* @ngInject */
  function PasswordRulesCtrl ($scope) {
    var vm = this;
    var formName = vm.formName;

    var initializePassword = function () {
      vm.passwordRequirement = {
        hasCharacterLimit: false,
        hasUppercaseCharacter: false,
        hasDigit: false,
        hasSpecialCharacter: false
      };

      if (formName.$error.required) {
        formName.$invalid = true;
      } else {
        formName.$invalid = false;
      }
    };

    var checkForPasswordRequirements = function () {
      if (vm.password) {
        vm.passwordRequirement.hasCharacterLimit = ((vm.password.length >= 8) && (vm.password.length <= 32));
        vm.passwordRequirement.hasUppercaseCharacter = (/[A-Z]/.test(vm.password));
        vm.passwordRequirement.hasDigit = (/[0-9]/.test(vm.password));
        vm.passwordRequirement.hasSpecialCharacter = /[!@#$%^&*()+\-:;<=>{}|~?]/.test(vm.password);

        var isPasswordRequirementsMet = vm.passwordRequirement.hasCharacterLimit && vm.passwordRequirement.hasUppercaseCharacter && vm.passwordRequirement.hasDigit && vm.passwordRequirement.hasSpecialCharacter;

        formName.$invalid = !isPasswordRequirementsMet;
      } else {
        initializePassword();
      }
    };

    var init = function () {
      initializePassword();
    };

    init();

    $scope.$watch('vm.password', function (currentValue, previousValue) {
      if (!angular.equals(currentValue, previousValue)) {
        checkForPasswordRequirements();
      }
    });
  }

})();

和HTML代码:-

<form name="vm.personalForm" novlidate autocomplete="off">
<md-input-container>
          <label>Name</label>
          <input type="text" ng-model="vm.eou.us.full_name" required>
        </md-input-container>

        <md-input-container ng-if="vm.eou.us.email">
          <label>Email</label>
          <input type="email" ng-model="vm.eou.us.email" disabled required>
        </md-input-container>

        <md-input-container>
          <label>Mobile</label>
          <input type="mobile" ng-model="vm.eou.ou.mobile" autocomplete="off" required>
        </md-input-container>

        <md-input-container>
          <label>Password</label>
          <input type="password" ng-attr-type="{{ vm.showPlainPassword ? 'text' : 'password' }}" name="password_valid" ng-model="vm.eou.us.password" autocomplete="off" ng-focus="vm.isPasswordFieldFocused = true" ng-blur="vm.isPasswordFieldFocused = false" ng-change="vm.checkForPasswordRequirements()">

          <span class="action-wrapper" ng-click="vm.showPlainPassword = !vm.showPlainPassword">
            <span class="action-text" ng-if="!vm.showPlainPassword">Show</span>
            <span class="action-text" ng-if="vm.showPlainPassword">Hide</span>
          </span>
        </md-input-container>

        <div ng-if="vm.eou.us.password || vm.isPasswordFieldFocused">
          <password-rules password="vm.eou.us.password" form-name="vm.personalForm.password_valid"></password-rules>
        </div>
        <div layout="row" layout-align-gt-xs="end center" class="settings-action-group">
          <button type="submit" class="btn btn-success" ng-click="vm.save(vm.personalForm)" ng-disabled="vm.personalForm.$invalid">Save</button>
        </div>
</form>

0 个答案:

没有答案