AngularJS使用ngMessages進行表單驗證_AngularJS

AngularJS 誕生於2009年，由Misko Hevery 等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用在Google的多款產品當中。 AngularJS有著許多特性，最為核心的是：MVVM、模組化、自動化雙向資料綁定、語意化標籤、依賴注入等等。

名稱為"ngMessages"的module，透過npm install angular-messages安裝。在沒有使用ngMessages之前，我們可能會這樣寫驗證：

<form name="userForm">
<input 
type="text" 
name="username" 
ng-model="user.username" 
ng-minlength="3" 
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

以上，列舉了每種可能的驗證失敗，並且手動編寫是否顯示錯誤提示訊息。

有了"ngMessages"這個module,大致這麼寫：

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>

ngMessages為我們自動判斷顯示哪一種錯誤。

使用ngMessages的幾個關鍵點：

● npm install angular-messages
●引用：angular-messages.js
● 依賴：angular.module('app',['ngMessages'])

這裡有一個簡單的Demo,檔案結構：

node_modules/
app.js
emailmessages.html
index.html

安裝如下：

npm install bootstrap
npm install angular
npm install angular-messages

==index.html

用户名

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}