Question

我的应用程序提取json数据并在点击时随机化结果，如何验证生成的每个结果并说明该值是否有效？

视图

  <div ng-controller="idCtrl">
    <button ng-click="randomize()">Random value on click</button>    
    <p>Id Number: <span data-ng-bind="RandomId.number"></span></p>
    <p>Valid?: <span></span> </p>
 </div>

json

[
    {"number": "8607025402081"},
    {"number": "8501016184086"},
    {"number": "6104053425672"},
    {"number": "8909025012083"},
    {"number": "2222222222222"},
    {"number": "8888888888888"},
    {"number": "0000000000000"},
    {"number": "9999999999999"}
]

脚本

var idApp = angular.module('idApp', []);
idApp.controller('idCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.regex = '(((\d{2}((0[13578]|1[02])(0[1-9]|[12]\d|3[01])|(0[13456789]|1[012]) (0[1-9]|[12]\d|30)|02(0[1-9]|1\d|2[0-8])))|([02468][048]|[13579][26])0229))(( |-)(\d{4})( |-)(\d{3})|(\d{7}))'; 

    $scope.randomize = function(){

    $http.get('js/idnumbers.json')
        .success(function(data) {
            $scope.idnumber = data;
            var randomIDIndex = Math.floor(Math.random() * $scope.idnumber.length);
            $scope.RandomId = $scope.idnumber[randomIDIndex];
            console.log(data);
        })};
}]);

Answer 1

ngPattern最常用于输入控件。如果您想使用ngPattern，您可以执行以下操作。但是，无效值不会放在文本框中。我认为这是因为它们......无效。

注意：我将正则表达式从字符串修改为RegExp。

var idApp = angular.module('idApp', []);
idApp.controller('idCtrl', ['$scope', '$http',
  function($scope, $http) {

    var data = [{
      "number": "8607025402081"
    }, {
      "number": "8501016184086"
    }, {
      "number": "6104053425672"
    }, {
      "number": "8909025012083"
    }, {
      "number": "2222222222222"
    }, {
      "number": "8888888888888"
    }, {
      "number": "0000000000000"
    }, {
      "number": "9999999999999"
    }];
    $scope.regex = /(((\d{2}((0[13578]|1[02])(0[1-9]|[12]\d|3[01])|(0[13456789]|1[012]) (0[1-9]|[12]\d|30)|02(0[1-9]|1\d|2[0-8])))|([02468][048]|[13579][26])0229))(( |-)(\d{4})( |-)(\d{3})|(\d{7}))/;

    $scope.randomize = function() {
      //make your HTTP call here
      $scope.idnumber = data;
      var randomIDIndex = Math.floor(Math.random() * $scope.idnumber.length);
      $scope.RandomId = $scope.idnumber[randomIDIndex];
      console.log($scope.form.theInput.$valid);
    };

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="idApp">
<div ng-controller="idCtrl">
  <form name="form">
    <button ng-click="randomize()">Random value on click</button>    
    <p>Id Number: <input name="theInput" ng-pattern="regex" ng-model="RandomId.number"></input></p>
    <p>Valid?: <span>{{form.theInput.$valid}}</span> </p>
  </form>
 </div>
</div>

由于ngPattern仅限于输入框，您可能只想使用好的JavaScript来完成验证。如，

var idApp = angular.module('idApp', []);
idApp.controller('idCtrl', ['$scope', '$http',
  function($scope, $http) {
    var data = [{
      "number": "8607025402081"
    }, {
      "number": "8501016184086"
    }, {
      "number": "6104053425672"
    }, {
      "number": "8909025012083"
    }, {
      "number": "2222222222222"
    }, {
      "number": "8888888888888"
    }, {
      "number": "0000000000000"
    }, {
      "number": "9999999999999"
    }];
    var regex = /(((\d{2}((0[13578]|1[02])(0[1-9]|[12]\d|3[01])|(0[13456789]|1[012]) (0[1-9]|[12]\d|30)|02(0[1-9]|1\d|2[0-8])))|([02468][048]|[13579][26])0229))(( |-)(\d{4})( |-)(\d{3})|(\d{7}))/;

    $scope.randomize = function() {

      //http call here
      $scope.idnumber = data;
      var randomIDIndex = Math.floor(Math.random() * $scope.idnumber.length);
      $scope.RandomId = $scope.idnumber[randomIDIndex];
      $scope.valid = regex.test($scope.RandomId.number);
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="idApp">
  <div ng-controller="idCtrl">
    <button ng-click="randomize()">Random value on click</button>
    <p>Id Number: <span data-ng-bind="RandomId.number"></span>
    </p>
    <p>Valid?: {{valid}} 
    </p>
  </div>
</div>

如何使用ng-pattern验证JSON数据

1 个答案: