ホームページ > 記事 > ウェブフロントエンド > AngularJSフォーム検証機能の実装方法

AngularJSフォーム検証機能の実装方法

小云云オリジナル: 2018-01-09 10:33:031640ブラウズ

この記事では主に AngularJS のフォーム検証機能について詳しく紹介します。興味のある方は参考にしていただければ幸いです。

ユーザーがフォームに入力した内容に基づいて、リアルタイムで視覚的なフィードバックを提供できることが重要です。人間対人間のコミュニケーションのコンテキストでは、フォーム検証によって与えられるフィードバックは、正しい入力を取得することと同じくらい重要です。

フォーム検証は、ユーザーに有益なフィードバックを提供するだけでなく、悪意のある入力や誤った入力による損傷から Web アプリケーションを保護します。 Web フロントエンドのバックエンドを保護するために最善を尽くす必要があります。

AngularJSはHTML5のフォーム検証機能と独自の検証命令を組み合わせることができ、とても便利です。 AngularJS は、多くのフォーム検証命令を提供します。

<form name="form" novalidate>
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>

フォーム検証を使用するには、まず、上記の例のようにフォームに name 属性があることを確認します。

すべての入力フィールドは、最大長と最小長などの基本的な検証を実行できます。これらの機能は、新しい HTML5 フォーム属性によって提供されます。

フォームに対するブラウザのデフォルトの検証動作をブロックしたい場合は、form 要素に novalidate タグを追加できます

1. 必須項目必須

フォーム入力が入力されたかどうかを確認するには、HTML5 を追加するだけです。入力フィールド要素必須とマークするだけです:

注: 必須属性は、次のタイプに適用されます: テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイル

<input type="text" required />

2. 最小長 ng -minleng="{number}"

フォーム入力のテキスト長が特定の最小値より大きいかどうかを確認するには、AngularJS ディレクティブ ng-minleng="{number}"

<input type="text" ng-minlength="5" />

3 を使用します。入力フィールド「{number}」の最大長 ng-maxlength=

フォーム入力のテキストの長さが特定の最大値以下であるかどうかを確認するには、AngularJS ディレクティブ ng-maxlength="{number] を使用します。 }"

<input type="text" ng-maxlength="20" />

4. パターンマッチング ng-pattern=" /PATTERN/"

ng-pattern="/PATTERN/" を使用して、入力が指定された正規表現と一致することを確認します:

<input type="text" ng-pattern="[a-zA-Z]" />

5。 Email

入力内容がメールであることを確認するには、次のように入力を変更します。タイプをメールに設定します:

<input type="email" name="email" ng-model="user.email" />

6. 数値

入力内容が数値であるかどうかを確認し、入力タイプを数値に設定します:

<input type="number" name="age" ng-model="user.age" />

7. URL

入力コンテンツがURLであるかどうかを確認し、入力を設定しますタイプはurlに設定されます:

<input type="url" name="homepage" ng-model="user.facebook_url" />

フォーム内の変数を制御します

$scopeオブジェクトでフォームのプロパティにアクセスできますこれにより、JavaScript は DOM 属性のフォームに間接的にアクセスできるようになります。これらのプロパティを利用すると、(AngularJS の他のすべてと同様に) フォームに対してリアルタイムの応答を行うことができます。これらのプロパティには次のものが含まれます。 (これらのプロパティには、以下の形式でアクセスできることに注意してください。)

formName.inputFieldName.property

■未変更フォーム

これは、ユーザーがフォームを変更したかどうかを判断するために使用されるブール型プロパティです。変更されていない場合は値が true、変更されている場合は値が false

formName.inputFieldName.$pristine

■変更されたフォーム

ユーザーがフォームを変更している限り、その有無に関係なく、入力が検証されているかどうか、値は true を返します

formName.inputFieldName.$dirty

■正当なフォーム

このブール型属性は、フォームの内容が正当であるかどうかを判断するために使用されます。現在のフォームのコンテンツが正当な場合、次の属性の値は true:

formName.inputFieldName.$valid

■ 不正なフォーム

このブール属性は、フォームのコンテンツが不正かどうかを判断するために使用されます。現在のフォームのコンテンツが不正な場合、次の属性の値は true になります:

formName.inputFieldName.$invalid

■ Error

これは、AngularJS によって提供されるもう 1 つの非常に便利な属性です: $error オブジェクト。これには、現在のフォームのすべての検証と、それらが有効かどうかに関する情報が含まれています。このプロパティにアクセスするには、次の構文を使用します。

formName.inputfieldName.$error

$parsers

ユーザーがコントローラーを操作し、ngModelController の $setViewValue() メソッドが呼び出されると、$parsers 配列内の関数がパイプライン形式で 1 つずつ呼び出されます。最初の $parse が呼び出された後、実行結果は 2 番目の $parse に渡され、以下同様です

これらの関数は、入力値を変換したり、$setValidity() 関数を通じてフォームの有効性を設定したりできます。

$parsers 配列の使用は、カスタム検証を実装する方法の 1 つです。

たとえば、入力値が特定の 2 つの値の間にあることを確認したい場合、$parsers 配列に新しい関数をプッシュすると、この関数が検証チェーンで呼び出されます。

各$parserから返された値は、次の$parserに渡されます。データモデルを更新したくない場合は、未定義を返します。

html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单测试</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="angular.1.2.13.js"></script>
</head>
<body>
  <p ng-controller="TestController">
    <form name="testForm">
      <input type="number" name="inputs" ng-test ng-model="obj.number">
      <span ng-show="testForm.inputs.$error.test">good</span>
      <span ng-hide="testForm.inputs.$error.test">bad</span>
      <p>{{ testForm.inputs.$valid }}</p>
      <p>{{ testForm.inputs.$invalid }}</p>
      <p>{{ obj.number }}</p>
    </form>
  </p>
  <script type="text/javascript" src="test5app.js"></script>
</body>
</html>

javascript ( test5app.js )

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});

AngularJSフォーム検証機能の実装方法

関連記事