Angularjs総括(一)フォーム検証

一般的なフォーム検証1.必須フィールドhtml 5プロパティ追加required

<input type="text" required /> 

2.最小長さと最大長さ

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

3.パターンマッチング——正規表現

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

4.メールモードtypeをemailに設定

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

5.数値typeをnumberに設定

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

6.url typeをurlに設定

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

よく使用されません(次のプロパティはformフォームにあります)
1.フォームの検証novalidate 2をブロックする.変更されていないフォームboolプロパティtrueは、formNameが変更されたことを示します.inputFieldName.$pristine;3.変更されたフォームbool属性formName.inputFieldName.$dirty4.フォームからbool属性formNameを検証する.inputFieldName.$valid5.フォーム検証に失敗しましたbool属性formName.inputFieldName.$invalid例:

 1 <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
 2 <div class="form-group has-feedback">
 3 <div class="col-md-4">
 4 <label for="name">1.   label>
 5 div>
 6 <div class="col-md-8">
 7 <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />
 8 <span class="glyphicon glyphicon-ok form-control-feedback"
 9 ng-show="myForm.name.$dirty && myForm.name.$valid">span>
10 div>
11 div>
12 form>

$pristine【修正なし】:{{myFormm.name.$pristine}}$dirty【修正済み】:{{myFormm.name.$dirty}}$invalid【検証失敗】{{myFormm.name.$invalid}}$invalid【検証成功】{{myFormm.name.$valid}}required:{{myFormm.name.$error.required}}
ngMessagesはフォームを最適化する.まずangularを導入する必要がありますmodule('myApp', ['ngMessages']); ngは$errorによってモデルの変化を監視し、$errorには詳細なエラー情報の例が表示されます.

 1 <form role="form" name="myForm" class="form-horizontal" novalidate>
 2     <div class="form-group">
 3         <div class="col-md-2">
 4                
 5         div>
 6         <div class="col-md-10">
 7             <input type="text" placeholder="ng-Messages  " name="name" ng-model="username.name"
 8                    ng-minlength=3 ng-maxlength=20 required />
 9             <hr />
10             $error：{{myForm.name.$error}}
11             <hr />
12             <div ng-messages="myForm.name.$error">
13                 <div ng-message="required">   div>
14                 <div ng-message="minlength">      3div>
15                 <div ng-message="maxlength">      20div>
16             div>
17         div>
18     div>
19 form>

2.エラープロンプトはテンプレートとして多重化され、指定されたパスはngによって自動的に追加され、ここではng-messages-includeコマンドを使用する必要がある.まずエラーを静的ページerrorに置く.html

1 <div ng-message="required">   div>
2 <div ng-message="email">      div>
3 <div ng-message="minlength">      3div>
4 <div ng-message="maxlength">      20div>
5 
6 <div ng-messages="myForm.name.$error" ng-messages-multiple ng-messages-include="@Url.Content('~/Content/template/error.html)">div>

 
 
詳細については、
【猿2048】www.mk 2048.com