Form Check

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

次のリンクをクリックすると "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 文の長さをチェックします。
    3文字に満たないとき「Too short!」を表示します。
    8文字を超えると「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 が3文字に満たないときのメッセージです。
    $error.maxlength が8文字を超えたときのメッセージです。
      <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)