0

我有一个文本区域字段，它输入 4 种类型的个人详细信息，用逗号分隔。我需要使用正则表达式验证这 4 个值中的每一个。这是我的方法，但它不是进行验证的角度方式。

var form = angular.module('form', []);
form.controller('helloController', ['$scope', function($scope){
  var submitted = false;
  var validNumber = new RegExp('numberRegExp');
  var validArea = new RegExp('areaRegExp');
  var validCity = new RegExp('cityRegExp');
  $scope.submit = function(hello){
    $scope.number = false;
    $scope.area = false;
    $scope.city = false;
    if (issue){
      $scope.submitted = true;
      var splittedDetails = hello.details.split(",");
      var trimmedDetails = $.map(splittedDetails, $.trim);
	  if (!validNumber.test(trimmedDetails[0])) {
	    $scope.inputversion.jiraIssue.$invalid = true;
		$scope.number = true;
	  }else if (!validArea.test(trimmedDetails[1])) {
		$scope.inputversion.jiraIssue.$invalid = true;
		$scope.area = true;
	  }else if (!validCity.test(trimmedDetails[2])) {
		$scope.inputversion.jiraIssue.$invalid = true;
		$scope.city = true;
	  }else{
        alert("Form now submitting");   
      }
    }
  };

}]);
<form class="form-horizontal" name="helloForm" ng-controller="helloController" ng-submit="submit(hello)" novalidate ng-app="form">
  <div class="form-group" ng-class="{ true:'has-error'}[submitted && helloForm.personal-details.$invalid]">
  <label for="helloForm" class="col-sm-2 control-label">Details</label>
    <div class="col-sm-10">
      <textarea class="form-control" rows="5" ng-model="hello.details" placeholder="number, area, city, details ex: 90********, XYX, XYZ" name="personal-details" required></textarea>
      <p ng-show="submitted && helloForm.personal-details.$error.required" class="help-block"> Details are required.</p>
      <p ng-show="submitted && number" class="help-block">Please check the format of issue number</p>
      <p ng-show="submitted && area" class="help-block">Please check the format of product area</p>
      <p ng-show="submitted && city" class="help-block">Please check the format of priority</p>
    </div>
  </div>
</form>

这种方法一次只能验证一个细节。但理想情况下，它应该以大部分角度方式动态验证。请提出你的想法。谢谢

4

1 回答 1

0

无意冒犯，但这似乎是验证 3 位预期数据的一种非常糟糕的方法。只有当且仅当用户在字段中输入 2 个且仅 2 个逗号时，逗号分隔才会起作用。

假设您想要表单中的持久数据（从一页传输到另一页），您将需要此模块的模型。最好的方法是通过 .service （因为在 Angular 的一个模块中每个命名服务只有一个实例）。我还将使用真正适用于缩小代码和最佳实践的格式，careof John Papa。

它还假设您已经在其他地方声明了模块（声明使用括号 [] 而召回不使用）。

angular.module('form')
  .service("DataService", DataService)
  DataService.$inject = ["$rootScope"];
  function DataService($rootScope) {
    var vm = this; //security in declaring (root)scope objects
    vm.phone = {value: '', placeholder: 'Enter your phone number'};
    vm.area = '';
    vm.city = '';
  };

除了使用 $scope/$rootScope 变量（与字段和模型的 2 路绑定）和用户尝试提交时的提交函数之外，您的控制器将几乎没有。

angular.module('form')
  .controller('FormController', FormController);
  FormController.$inject = ['$scope', 'DataService'];
  function FormController($scope, DataService) {
    var vm = this;
    vm.phone = DataService.phone;
    vm.area = DataService.area;
    vm.city= DataService.city;
    function submit() {
    //persist the data to the next page/controller/etc.
    DataService.number = vm.number;
    DataService.area = vm.area;
    DataService.city = vm.city;
    //do work here
    };

您可以使用 Angular 的 2-way 数据绑定在 HTML 中进行所有验证。假设您还使用BootStrap，每个字段应类似于以下内容：

<!-- phone field (required/validated) -->
<div class="row form-group" ng-class="{'has-warning': helloForm.phone.$invalid && helloForm.phone.$dirty,'has-error': helloForm.phone.$error.required && helloForm.phone.$touched}">
<label for="phone" class="col-md-3 control-label">Phone&#58;</label>
<div class="col-md-9">
<input type="text" id="phone" name="phone" ng-model="vm.phone.value" placeholder="{{vm.phone.placeHolder}}" value="{{vm.phone.value}}" ng-required="true"class="skinny form-control" ng-pattern="/^\+?[-0-9)(]{8,31}[0-9x]{0,6}$/i" />
<p class="required" ng-show="helloForm.phone.$invalid || helloForm.phone.$error.required">&#42;</p>
<p class="good" ng-show="helloForm.phone.$valid">&#10004;</p>
</div>
<p class="help-block" ng-show="helloForm.phone.$error.pattern && helloForm.phone.$dirty">Phone format&#58; &#43;15558675309x52 or &#40;555&#41;867-5309x52</p>
<p class="help-block" ng-show="helloForm.phone.$error.required && helloForm.phone.$touched">Phone is a required field</p>
</div><br />

而不是我的 E.164（用于国际号码）和美国标准电话组合验证（ng-pattern 字段中的正则表达式），您可以使用花括号来声明您的变量正则表达式具有可比性。我希望这有助于或至少为您指明正确的方向。

谢谢阅读，

C§

于 2015-07-29T20:25:55.410 回答