Input Check

Form からタイプ入力された複数の項目をチェックします。

次のリンクをクリックすると "ngp_inputcheck.html" が呼び出されます。
Input Check のプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_inputcheck.html" です。
    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<body ng-controller="MyController">
<form name="myForm" ng-submit="onsubmit()" novalidate>
  <div>
    <label for="name">名前：</label><br />
    <input id="name" name="name" type="text" ng-model="user.name"
      required ng-minlength="2" ng-maxlength="10" />
    <span ng-show="myForm.name.$error.required">
      名前は必須です。</span>
    <span ng-show="myForm.name.$error.minlength">
      名前は2文字以上で入力してください。</span>
    <span ng-show="myForm.name.$error.maxlength">
      名前は10文字以内で入力してください。</span>
  </div>
  <div>
    <label for="age">年齢：</label><br />
    <input id="age" name="age" type="number" ng-model="user.age"
      required min="20" max="60" />
    <span ng-show="myForm.age.$error.required">
      年齢は必須です。</span>
    <span ng-show="myForm.age.$error.min">
      年齢は20以上で入力してください。</span>
    <span ng-show="myForm.age.$error.max">
      年齢は60以下で入力してください。</span>
  </div>
  <div>
    <label for="mail">メールアドレス：</label><br />
    <input id="mail" name="mail" type="email" ng-model="user.mail"
      required />
    <span ng-show="myForm.mail.$error.required">
      メールアドレスは必須です。</span>
    <span ng-show="myForm.mail.$error.email">
      メールアドレスは正しい形式で入力してください。</span>
  </div>
  <div>
    <label for="entry">入会希望日：</label><br />
    <input id="entry" name="entry" type="date" ng-model="user.entry"
      required />
    <span ng-show="myForm.entry.$error.required">
      入会希望日は必須です。</span>
    <span ng-show="myForm.entry.$error.date">
      入会希望日は正しい形式で入力してください。</span>
  </div>
    <label for="memo">備考：</label><br />
    <textarea id="memo" name="memo" rows="5" cols="30"
      ng-model="user.memo" ng-maxlength="10"></textarea>
    <span ng-show="myForm.memo.$error.maxlength">
      備考は10文字以内で入力してください。</span>
  </div>
  <div>
    <input type="submit" value="申込"
      ng-disabled="myForm.$invalid" />
  </div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope',
  function($scope)
  { $scope.onsubmit = function()
    { console.log('名前：' + $scope.user.name);
      console.log('年齢：' + $scope.user.age);
      console.log('メールアドレス：' + $scope.user.mail);
      console.log('入会希望日：' + $scope.user.entry);
      console.log('備考：' + $scope.user.memo);
    };
  }]);
</script>

</body>
</html>
  2. AngularJS で調べていて、私が最も関心をもった機能です。
    html を AngularJS の myApp モジュールに関連付けます。
    <html ng-app="myApp">
  3. Form で必要な項目をタイプ入力する形式を定義します。
    各項目には、必須入力項目や入力データの制限が設定されています。
    名前は「必須, ２文字以上, １０文字以下」です。 
    <form name="myForm" ng-submit="onsubmit()" novalidate>
  <div>
    <label for="name">名前：</label><br />
    <input id="name" name="name" type="text" ng-model="user.name"
      required ng-minlength="2" ng-maxlength="10" />
    <span ng-show="myForm.name.$error.required">
      名前は必須です。</span>
    <span ng-show="myForm.name.$error.minlength">
      名前は2文字以上で入力してください。</span>
    <span ng-show="myForm.name.$error.maxlength">
      名前は10文字以内で入力してください。</span>
  </div>
      ・
      ・
      ・
  <div>
    <input type="submit" value="申込"
      ng-disabled="myForm.$invalid" />
  </div>
</form>
  4. input 要素では、それぞれ type 属性に応じて、以下のような検証属性が用意されています。
    検証機能を利用する場合には、あとでエラー情報を参照するために、name 属性は必須です。
    type 属性 属性 概要
    共通 required 必須項目
    ng-required 必須項目(Angular式で指定)
    number／date／time／datetime-local／month／week min 最小値
    max 最大値
    text／number／email／url／<textarea> ng-minlength 最小文字数
    ng-maxlength 最大文字数
    ng-pattern 正規表現パターンに合致するか
  5. 検証エラー情報は「フォーム名.要素名.$error.検証名」で参照できます。
    例えば「myForm.name.$error.required」で「myForm フォームの name欄(名前)が空か(＝必須検証がエラーであるか)」という意味になります。
    検証名 概要
    required 必須検証
    max 最大値検証
    min 最小値検証
    maxlength 文字列の最大長検証
    minlength 文字列の最小長検証
    pattern 正規表現検証
    number 数値検証
    url URLのフォーマット検証
    email メールアドレスのフォーマット検証
    date 日付のフォーマット検証
    datetimelocal日付／時刻のフォーマット検証
    time 時刻のフォーマット検証
    week 週のフォーマット検証
    month 月のフォーマット検証
  6. 個々の検証項目ではなく、フォーム全体で何らかの検証エラーが発生しているかを判定するには、フォーム名.$invalid を参照します。
    構文 概要
    フォーム名.$valid フォーム配下の入力値が全て正しいか
    フォーム名.$pristine フォームは変更されていないか
    フォーム名.$dirty フォームが変更されているか
    フォーム名.要素名.$valid 入力項目が正しい値であるか
    フォーム名.要素名.$invalid入力項目が不正な値であるか

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)