在AngularJS中爲7或9位數的輸入字段添加驗證

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> 

我創建了一個plunker這裏 - https://plnkr.co/edit/S39AZNzlHa2vW6uQDuov?p=preview

任何人可以幫助我在我的驗證？

Answer 1

使用

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

Answer 2

什麼@JBNizet提到的是完全正確的。或者，您也可以爲此創建一個指令。請參閱下面的工作示例。尋找指令length7Or9：

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

.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; 
 
}

<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>