【AngularJs】---フォーム検証

1.必須項目
入力フィールド要素にHTML 5タグrequiredを追加すれば、フォーム入力が入力されているかどうかを確認します.

<input type="text" required />

2.最小長フォーム入力のテキスト長がある最小値より大きいかどうかを検証し、入力フィールドでAngularJS命令を使用する
ng-minleng= "{number}":

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

 
3.最大長フォームに入力されたテキストの長さが最大値以下であることを確認し、入力フィールドでAngularJS命令ng-maxlength="{number}":

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

 
4.モードマッチングは、ng-pattern="/PATERN/"を使用して、指定した正規表現に一致するように入力します.

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

 
5.電子メールは、以下のようにinputのタイプをemailに設定すれば、入力内容が電子メールであるかどうかを確認します.

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

 
6.数値入力内容が数値であるかどうかを検証し、inputのタイプをnumberに設定する.

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

 
7.URL入力内容がURLであることを検証し、inputのタイプをurlに設定する:

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

 
8.フォーム内で変数フォームを制御する属性は、その属する$scopeオブジェクトにアクセスでき、$scopeオブジェクトにもアクセスできるので、JavaScriptはDOMのフォーム属性に間接的にアクセスできます.これらのプロパティを使用すると、フォームにリアルタイム(AngularJSの他のものと同じ)で応答できます.これらのプロパティには、次のものが含まれます.(これらのプロパティにアクセスするには、次のフォーマットを使用します.)--formName.inputFieldName.property

未修正フォーム

これは、ユーザーがフォームを変更したかどうかを判断するブール属性です.変更されていない場合はtrue、変更された値がfalse:formName.inputFieldName.$pristineの場合

修正済みフォーム

ユーザーがフォームを変更した場合、入力が検証に合格したかどうかにかかわらず、この値はtrue:formName.inputFieldName.$dirtyを返します.

合法的なフォーム

このブール型のプロパティは、フォームの内容が合法かどうかを判断するために使用されます.現在のフォームの内容が正当である場合、次のプロパティの値はtrue:formName.inputFieldName.$validです.

不正なフォーム

このブール属性は、フォームの内容が合法ではないかどうかを判断するために使用されます.現在のフォームの内容が不正である場合、次のプロパティの値はtrue:formName.inputFieldName.$invalidです.

 エラー

これはAngularJSが提供するもう一つの非常に有用な属性である$errorオブジェクトです.現在のフォームのすべての検証内容と、それらが合法かどうかの情報が含まれています.次の構文でこのプロパティにアクセスします:formName.inputfieldName.$error
検証に失敗した場合、この属性の値はtrueです.値がfalseの場合、入力フィールドの値が検証されたことを示します.
 eg:

<form name="myForm">
  <input name="personEmail" required type="email" ng-model="person.email"/>
  <span ng-show="!myForm.personEmail.$valid">  </span>
  <span ng-show="myForm.personEmail.$error.required">  </span>
  <span ng-show="myform.personEmail.$error.email">email     </span>
</form>

 
9.いくつかの有用なCSSスタイルAngularJSはフォームを処理する時、フォームの現在の状態によっていくつかのCSSクラス(例えば現在は合法的で、変化が発生していないなど)を追加します.これらのCSSクラスの名前は前述の属性とよく似ています.これらには、フォーム入力フィールドの特定のステータスに対応する.ng-pristine{}.ng-dirty{}.ng-valid{}.ng-invalid{}が含まれます.フィールドの入力が不正な場合、.ng-invlidクラスがこのフィールドに追加されます.現在の例のサイトは、対応するCSSスタイルをinput.ng-invalid{border:1 px solid red;}input.ng-valid{border:1 px solid green;}に設定します.
  
【DEMO】

<form name="lg_form" ng-submit="login()">
            <ion-content class="padding lg-padding ">
                <div class="list">
                    <div class="list list-inset">
                        <label class="item item-input">
                            <input type="text" placeholder="username" ng-model="user.username" ng-maxlength="8"
                                   required/>
                        </label>
                        <label class="item item-input">
                            <input type="password" placeholder="password" ng-model="user.password" ng-maxlength="8"
                                   required/>
                        </label>
                    </div>
                </div>
                <div class="padding">
                    <button ng-disabled="lg_form.$invalid"
                            class="button button-block button-large button-clear button-positive" type="submit">
                            
                    </button>
                </div>
            </ion-content>
    </form>

 コミットする方法は,ng−submitによりcontroller内のlogin関数にバインドされた.