Question

输入数字框需要以下验证：

长度输入框最多需要3个整数值（不允许小数）
高度输入框应取3个整数，小数最多2个位置
任何输入框都不允许使用字符。

添加新行后（单击“打开新行”旁边的按钮），相同的验证必须正常工作，但它不能正常工作。新打开的行不进行验证，因此如何使其在angular或j查询中工作。 / p>

＆＃13;

var app = angular.module('Calc', []);
 var inputQuantity = [];
    $(function() {
      $(".form-control").each(function(i) {
        inputQuantity[i]=this.defaultValue;
         $(this).data("idx",i); // save this field's index to access later
      });
      $(".form-control").on("keyup", function (e) {
        var $field = $(this),
            val=this.value,
            $thisIndex=parseInt($field.data("idx"),10); // retrieve the index
//        window.console && console.log($field.is(":invalid"));
          //  $field.is(":invalid") is for Safari, it must be the last to not error in IE8
        if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid") ) {
            this.value = inputQuantity[$thisIndex];
            return;
        } 
        if (val.length > Number($field.attr("maxlength"))) {
          val=val.slice(0, 5);
          $field.val(val);
        }
        inputQuantity[$thisIndex]=val;
      });      
    });
app.controller('Calc_Ctrl', function ($scope, $http) {
     $scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
     $scope.areas = [{id : 'choice2', total : 0}];

     $scope.addNewChoice = function () {
          var newItemNo = $scope.choices.length + 1;
          $scope.choices.push({
               'id' : 'choice' + newItemNo, l2 : 0, b2 : 0
          });
     };
     $scope.removeChoice = function () {
          var lastItem = $scope.choices.length - 1;
          if (lastItem !== 0) {
               $scope.choices.splice(lastItem);
          }
     };
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="newscript.js"></script>

<body>
  <div ng-app="Calc" ng-controller="Calc_Ctrl">
    <div  data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line no-gap">
      <h6>Open New Row {{$index + 1}} 
        <button type="button" class="btn btn-default pull-right btn-right-gap  btn-red" aria-label="Left Align"  ng-click="addNewChoice()" style="margin-top: -5px;" id="plus_icon">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        </button>
      </h6> 
      <div class="row walls top-gap">
        <div class="form-group col-md-3 col-sm-3 col-xs-12">
          <label for="length">Length :</label>
          <input type="number" class="form-control text-red bold" id="length"  ng-model="choice.l2" min="0" max="999" maxlength="6" step="0.00" >
        </div>
        <div class="form-group col-md-3 col-sm-3 col-xs-12">
          <label for="height">Height :</label>
          <input type="number" class="form-control text-red bold" id="height"   ng-model="choice.b2" min="0" max="999" maxlength="6" step="0.01">
        </div>
        <button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align"  ng-click="removeChoice()" id="minus_icon">
        </button>
      </div>
    </div>
  </div>
</body>
</html>

＆＃13;

而添加下一行字段验证不起作用

0 个答案: