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

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

emailmessages.html

把有關email的表單驗證放在這裡，透過

顯示到頁面某個位置上。

<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>

ps：常用的表單驗證指令

1. 必填項驗證

某個表單輸入是否已填寫，只要在輸入欄位元素上新增HTML5標記required即可：

複製程式碼 程式碼如下:

2. 最小長度

驗證表單輸入的文字長度是否大於某個最小值，在輸入欄位上使用指令ng-minleng= "{number}"：

複製程式碼 程式碼如下:

3. 最大長度

驗證表單輸入的文字長度是否小於或等於某個最大值，在輸入欄位上使用指令ng-maxlength="{number}"：

複製程式碼 程式碼如下:

4. 模式匹配

使用ng-pattern="/PATTERN/"來確保輸入能夠符合指定的正規表示式：

複製程式碼 程式碼如下:

5. 電子郵件

驗證輸入內容是否為電子郵件，只要像下面這樣將input的類型設定為email即可：

複製程式碼 程式碼如下:

6. 數字

驗證輸入內容是否為數字，將input的型別設定為number：

複製程式碼 程式碼如下:

7. URL

驗證輸入內容是否為URL，將input的類型設定為 url：

複製程式碼 程式碼如下: