HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

AngularJSフォームの検証

❮ 前 次 ❯

AngularJSは入力データを検証できます。

フォームの検証

AngularJSは、クライアント側のフォーム検証を提供します。

AngularJSは、フォームと入力フィールド（input、textarea、select）の状態を監視し、現在の状態についてユーザーに通知できるようにします。

AngularJSは、それらが変更されたかどうかに関する情報も保持します。

標準のHTML5属性を使用して入力を検証することも、独自の検証関数を作成することもできます。

クライアント側の検証だけでは、ユーザー入力を保護することはできません。サーバー側の検証も必要です。

必須

HTML5属性requiredを使用して、入力フィールドに入力する必要があることを指定します。

例

入力フィールドは必須です：

<form name="myForm">
  <input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

Eメール

HTML5タイプemailを使用して、値が電子メールでなければならないことを指定します。

例

入力フィールドは電子メールである必要があります。

<form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

フォームの状態と入力の状態

AngularJSは、フォームと入力フィールドの両方の状態を常に更新しています。

入力フィールドの状態は次のとおりです。

  • $untouched フィールドはまだ触れられていません
  • $touched フィールドに触れました
  • $pristine フィールドはまだ変更されていません
  • $dirty フィールドが変更されました
  • $invalid フィールドの内容が無効です
  • $valid フィールドの内容は有効です

これらはすべて入力フィールドのプロパティであり、またはのいずれtrue かfalseです。

フォームには次の状態があります。

  • $pristine フィールドはまだ変更されていません
  • $dirty 1つ以上が変更されました
  • $invalid フォームの内容が無効です
  • $valid フォームの内容は有効です
  • $submitted フォームが送信されます

これらはすべてフォームのプロパティであり、またはのいずれtrue かfalseです。

これらの状態を使用して、ユーザーに意味のあるメッセージを表示できます。たとえば、フィールドが必須であり、ユーザーがそのフィールドを空白のままにした場合、ユーザーに警告を与える必要があります。

例

フィールドがタッチされ、空の場合はエラーメッセージを表示します。

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

CSSクラス

AngularJSは、状態に応じてフォームと入力フィールドにCSSクラスを追加します。

次のクラスが入力フィールドに追加または入力フィールドから削除されます。

  • ng-untouched フィールドはまだ触れられていません
  • ng-touched フィールドに触れました
  • ng-pristine フィールドはまだ変更されていません
  • ng-dirty フィールドが変更されました
  • ng-valid フィールドの内容は有効です
  • ng-invalid フィールドの内容が無効です
  • ng-valid-key検証ごとに1つのキー。例：ng-valid-required、検証する必要のあるものが複数ある場合に役立ちます
  • ng-invalid-key 例： ng-invalid-required

次のクラスがフォームに追加またはフォームから削除されます。

  • ng-pristine まだ変更されていないフィールドはありません
  • ng-dirty 1つ以上のフィールドが変更されました
  • ng-valid フォームの内容は有効です
  • ng-invalid フォームの内容が無効です
  • ng-valid-key検証ごとに1つのキー。例：ng-valid-required、検証する必要のあるものが複数ある場合に役立ちます
  • ng-invalid-key 例： ng-invalid-required

クラスが表す値が。の場合、クラスは削除されますfalse。

これらのクラスのスタイルを追加して、アプリケーションに、より優れた、より直感的なユーザーインターフェイスを提供します。

例

標準のCSSを使用して、スタイルを適用します。

<style>
input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}
</style>

フォームのスタイルも設定できます。

例

変更されていない（元の）フォームと変更されたフォームにスタイルを適用します。

<style>
form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}
</style>

カスタム検証

独自の検証関数を作成するのは少し注意が必要です。アプリケーションに新しいディレクティブを追加し、特定の指定された引数を使用して関数内の検証を処理する必要があります。

例

カスタム検証関数を含む独自のディレクティブを作成し、を使用してそれを参照しmy-directiveます。

このフィールドは、値に文字「e」が含まれている場合にのみ有効になります。

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>

説明された例：

HTMLでは、新しいディレクティブは属性を使用して参照されます my-directive。

JavaScriptでは、。という名前の新しいディレクティブを追加することから始めmyDirectiveます。

ディレクティブに名前を付けるときは、キャメルケース名を使用する必要があります myDirectiveが、それを呼び出すときは、-区切り名を 使用する必要がありますmy-directive。

次に、必要  ngModelであると指定したオブジェクト、つまりngModelControllerを返します。

いくつかの引数を取るリンク関数を作成します。ここで、4番目の引数はmCtrl、ですngModelController。

次に、myValidation1つの引数を取る関数（この場合は、という名前）を指定します。この引数は入力要素の値です。

値に文字「e」が含まれているかどうかをテストし、モデルコントローラーの有効性をまたはのいずれかに設定しtrueますfalse。

最後に、入力値が変更されるたびに実行される他の関数の配列に関数をmCtrl.$parsers.push(myValidation);追加します。 myValidation

検証例

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
  $scope.user = 'John Doe';
  $scope.email = '[email protected]';
});
</script>

</body>
</html>

HTMLフォーム属性novalidateは、デフォルトのブラウザ検証を無効にするために使用されます。

例の説明

AngularJSディレクティブng-modelは、入力要素をモデルにバインドします。

モデルオブジェクトには、 userとemailの2つのプロパティがあります。

ng-showのため、 color：redのスパンは、ユーザーまたは電子メールが$ dirtyおよび$ invalidの場合にのみ表示されます。


❮ 前 次 ❯