在AngularJS

Question

我正在尝试在输入字段中添加验证，以便它可以接受7位或9位数，但我找不到任何方法来执行此操作。在我的代码中，我添加了ng-minlength=7和ng-maxlength=9，但这并没有解决我的目的。

我只想添加7位或9位数字，如果我在框中输入8位数字，则应显示错误。我使用的代码如下，但它不符合我的要求 -

     <div class="form-group" ng-class="{ 'has-error' : myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched ) || myForm.num.$error.minlength || myForm.num.$error.maxlength}">

    <label for="UserName" style="color:#767676" class="" ng-hide="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.maxlength)">Number</label>
                       <label class="error_message_text" ng-show="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.maxlength)">
                            Please enter the number of either 7 or 9 digits
                        </label><br>
    <input type="text" numbers-only name="num" class="form-control" ng-class="" ng-minlength="7" ng-maxlength="9" ng-model="user.name" ng-required='!user.memNo' required/>

</div>

我在这里创造了一个傻瓜 - https://plnkr.co/edit/S39AZNzlHa2vW6uQDuov?p=preview

有人可以帮我验证吗？

Answer 1

使用

ng-pattern="/^\d{7}$|^\d{9}$/"

Answer 2

@JBNizet提到的是完全正确的。或者，您也可以为此创建指令。请参阅下面的工作示例。寻找指令length7Or9：

＆＃13;

＆＃13;

angular.module('myApp', []).controller("myCtrl", function($scope) {
  $scope.changeme = function() {
    alert('here');
  }

}).directive('numbersOnly', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        if (text) {
          var transformedInput = text.replace(/[^0-9]/g, '');

          if (transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
          }
          return transformedInput;
        }
        return undefined;
      }

      ngModelCtrl.$parsers.push(fromUser);
    }
  };
}).directive('length7Or9', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      ngModelCtrl.$validators.myLength = function(modelValue, viewValue) {
        if (!viewValue) {
          return false;
        }

        return (viewValue.length === 7 || viewValue.length === 9);
      }
    }
  };
});

＆＃13;

.registration-form .form-control {
  border-radius: 2px;
}
.registration-form .has-error .form-control,
.registration-form .has-error .form-control:hover,
.registration-form .has-error .form-control:active {
  border-color: red;
  box-shadow: none !important;
}
.has-error input[type="text"]:focus,
.has-error input[type="password"]:focus,
.has-error input[type="number"]:focus {
  background-color: red !important;
}
.registration-form label {
  font-weight: normal;
}
.registration-form .form-group input[type="text"]:focus,
.registration-form .form-group input[type="password"]:focus,
.registration-form .form-group input[type="number"]:focus {
  outline: none;
  box-shadow: none !important;
  background-color: #18b6d6;
}
.error_message_text {
  color: red;
}
.glyphicon {
  vertical-align: bottom;
  float: right;
}
.dob-select-container {
  margin: 0px;
  padding: 0px;
}
.dob-select-container .dd .ddTitle .ddTitleText {
  width: 100%;
}
.styled-select {
  display: inline-block;
  height: 33px;
  margin-right: 10px;
}
.styled-select .ddcommon {
  width: 78px !important;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container registration-form">
    <form name="myForm" class="form-inline" novalidate>
      <h3 style="color: #818285;">Login<span class="glyphicon glyphicon-info-sign "></span></h3>


      <br>

      <div class="form-group" ng-class="{ 'has-error' : myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched ) || myForm.num.$error.myLength}">

        <label for="UserName" style="color:#767676" class="" ng-hide="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.maxlength)">Number</label>
        <label class="error_message_text" ng-show="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.myLength)">
          Please enter the number of either 7 or 9 digits
        </label>
        <br>
        <input type="text" numbers-only name="num" class="form-control" ng-model="user.name" ng-required='!user.memNo' required length-7-or-9 />

      </div>
      <br>
      <br>
      <button type="submit" class="btn btn-blue-1">Submit</button>

    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;