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>

このアプローチでは、一度に 1 つの詳細のみを検証できます。しかし、理想的には、角度のある方法の多くで動的に検証する必要があります。あなたのアイデアを提案してください。ありがとう

4

1 に答える 1

0

問題はありませんが、これは予想される 3 ビットのデータを検証するための非常に悪い方法のように思えます。コンマ区切りは、ユーザーがフィールドにコンマを 2 つだけ入力した場合にのみ機能します。

フォームから永続化されたデータ (あるページから別のページへの転送) が必要であると仮定すると、このモジュールのモデルが必要になります。これを行う最善の方法は、.service を使用することです (Angular のモジュールには名前付きサービスごとにインスタンスが 1 つしかないため)。また、圧縮されたコードとベスト プラクティスで実際に機能する形式を使用します。John Papaの世話をします。

また、モジュールが別の場所で宣言されていることも前提としています (declare は括弧 [] を使用しますが、recall は使用しません)。

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 変数 (フィールドとモデルへの双方向バインディングを使用) の使用と、ユーザーが送信しようとしたときの送信機能を除いて、コントローラーにはほとんど含まれていません。

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§

于 2015-07-29T20:25:55.410 に答える