AngularJs は ng1.3+ フォーム validation_AngularJS を実装します-jsチュートリアル-php.cn

AngularJs は ng1.3+ フォーム validation_AngularJS を実装します

WBOY

リリース： 2016-05-16 15:26:28

オリジナル

1321 人が閲覧しました

前回の記事の詳細説明フォームバリデーションのAngularJS実装ng1.3以降ではフォームバリデーションが最適化され、表示する要素を作成するのに詳細な式の状態が必要なくなったと言われています。または隠れます。

例: ng1.3 より前のバージョンは次のように記述する必要があります:

コードをコピーコードは次のとおりです:

ngMessages ディレクティブは ng1.3 以降に追加されました。モジュールにパッケージ化されてリリースされているため、使用する場合はこの依存モジュールを導入するだけで済みます

コードをコピーコードは次のとおりです:

angular.module('myApp', ['ngMessages' ]);

使い方は？

それでは、その使用方法を見てみましょう。コードは次のとおりです。

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用户名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error：{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填项</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太长大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

ログイン後にコピー

効果は次のとおりです:

$error にはエラーに関する詳細情報が含まれているため、ng は実際にモデルの変更を監視していることがわかります。同時に、アプリケーションシナリオで同時に複数のエラーが発生した場合、上記のコードが実行されます。エラーメッセージは ng-message の順に 1 つだけ表示されます。すべて表示したい場合は、ng-messages-multiple

を追加するだけです。

<input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太长大于20</div>
</div>

ログイン後にコピー

効果は次のとおりです:

再利用するにはどうすればよいですか?

検証情報のほとんどはプロジェクト内で汎用性が高いため (スタイル、説明などの一貫性が高い)、ここでは再利用も考慮します。NG はソリューションも提供します

テンプレートとして使用するだけで、指定したリクエストパスが ng によって自動的に追加されます。これは別のディレクティブ ng-messages-include

です。

上記の検証情報を別の HTML 静的ページに保存し、ng-messages-include を使用してリクエストパスを指定します。

コード:

 <div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div>

ログイン後にコピー

error.html

<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>

ログイン後にコピー

効果は次のとおりです:

もちろん、テンプレートは特別な期間の特定のフィールドエラープロンプトの要件を満たさない場合があります。次のようにカスタムプロンプトを追加できます。

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

ログイン後にコピー

カスタム検証 (命令) には多くの詳細と知識が必要です。単に使用するためであれば、関数を書くことはできるかもしれませんが、コードは醜く、あまりにも不器用です。理解するのに数か月かかります。完全に理解したら、それを共有します。「AngularJs コマンドの理解」と組み合わせて学習することもできます。