angular js中一個文本區域上的多個正則表達式模式

Question

我有一個文本區域字段，在其中輸入以逗號分隔的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> 

這種方法一次只能驗證一個細節。 但是理想情況下，它應該以多種角度動態驗證。 請提出您的想法。 謝謝

Answer 1

沒有冒犯，但這似乎是驗證3位預期數據的一種非常糟糕的方法。 僅當用戶在字段中輸入2個和僅2個逗號時，逗號分隔才有效。

假設您要保留表單中的數據（從一頁轉移到另一頁），則需要此模塊的模型。 最好的方法是通過.service（因為Angular模塊中每個命名服務只有一個實例）。 我還將使用實際上將與最小化代碼和最佳實踐一起使用的格式，請注意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變量（對字段和Model具有雙向綁定）和用戶嘗試提交的Submit函數之外，您的控制器幾乎沒有其他用途。

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的數據兩向綁定在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§