AngularJs實現ng1.3+表單驗證

AngularJs實現ng1.3+表單驗證_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前一篇文章詳解AngularJS實現表單驗證說過，ng1.3+以後對於表單驗證有了最佳化，它不再需要一個詳細的運算式狀態建立元素顯示或隱藏。

例如：我們在ng1.3之前的版本都需要如下寫法：

複製代碼代碼如下:

ng1.3之後新增了一個ngMessages指令，他被打包成一個模組發布，因此我們使用的時候只需要將這個相依模組引入即可

複製代碼代碼如下:

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

怎麼用？

現在我們學習一下，它的用法，Code如下：

<!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>

效果如下：

可以看出，其實ng是通過$error來監視模型的變化，因為$error中包含了錯誤的詳細資料，同時，如果我們的應用情境中如果同時，有好幾處錯誤，那麼，上面代碼按照ng-message的順序只會顯示一條錯誤資訊，如果我們需要全部顯示出來只需要添加 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指定請求路徑即可。

Code:

 <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指令》進行學習。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More