Form Check

Form からタイプされた TEXT 文の長さを調べてメッセージを表示します。
maeda mino
Too long!

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

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_formcheck.html" です。
    <!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>

<body>
 <form name="myForm" novalidate>
  <div><input type="text" name="text1" ng-model="sampleText" ng-required="true" ng-minlength=3 ng-maxlength=8></div>
  <div ng-show="myForm.text1.$error.required">Required!</div>
  <div ng-show="myForm.text1.$error.minlength">Too short!</div>
  <div ng-show="myForm.text1.$error.maxlength">Too long!</div>
 </form>

</body>
</html>
  2. Form からタイプ入力された TEXT 文の長さをチェックします。
    ３文字に満たないとき「Too short!」を表示します。
    ８文字を超えると「Too long!」を表示します。
  3. form の input から TEXT 文をタイプ入力します。
    最小文字列長と最大文字列長が設定されています。
      <div><input type="text" name="text1" ng-model="sampleText" ng-required="true" ng-minlength=3 ng-maxlength=8></div>
  4. TEXT 文のタイプに当たってメッセージを表示します。
    $error.required が TEXT がタイプされていないときのメッセージです。
    $error.minlength が３文字に満たないときのメッセージです。
    $error.maxlength が８文字を超えたときのメッセージです。
      <div ng-show="myForm.text1.$error.required">Required!</div>
  <div ng-show="myForm.text1.$error.minlength">Too short!</div>
  <div ng-show="myForm.text1.$error.maxlength">Too long!</div>

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