AngularJS中使用的表單驗證

Reference: http://www.tuicool.com/articles/2Qbiqi

 

客戶端表單驗證是AngularJS裏面最酷的功能之一。 AngularJS表單驗證可讓你從一開始就寫出一個具備交互性和可相應的現代HTML5表單。

在AngularJS中，有許多表單驗證指令。在這裏，咱們將談談幾個最流行指令，而後咱們將討論如何編寫自定義的驗證。

<form name="form"> <label name="email">Your email</label> <input type="email" name="email" ng-model="email" placeholder="Email Address" /> </form>

AngularJS使得咱們能夠在不用額外努力的狀況下輕鬆的處理客戶端表單驗證。雖然咱們不能僅靠客戶端驗證來保持咱們的Web應用程序的安全性，但他們提供了良好即時反饋到表單上。

要使用表單驗證，咱們首先必須確保 form 標籤有一個 name 屬性，像上面的例子同樣。明白了嗎？太好了！

全部輸入字段能夠進行一些基本的驗證，例如最小長度，最大長度，等等，這些都是HTML5標籤的屬性驗證。

一般須要在 form 標籤中加上 novalidate 屬性， 這將禁用瀏覽器自帶的驗證功能，從而使用AngularJS提供的驗證。

讓咱們來看看咱們能夠在input設置哪些驗證：

必填

驗證是否已輸入字符，只需在標籤上加上 required ：

<input type="text" required />

最小長度

驗證輸入至少輸入{number}個字符，使用AngularJS指令的 ng-minlength=「{number}」 ：

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

最大長度

驗證輸入字符要小於等於{number}個字符，使用AngularJS指令的 ng-maxlength=「{number}」 ：

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

正則匹配

要確保輸入匹配一個正則表達式，使用AngularJS的指令 ng-pattern="/PATTERN/" :

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

Email

驗證輸入字符是一個電子郵件地址，只需設定 input 的 type 屬性爲 email ，像這樣：

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

數字

驗證輸入字符是一個數字，一樣只需設定 input 的 type 屬性爲 number ，像這樣：

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

Url

驗證輸入字符是一個URL地址，一樣只需設定 input 的 type 屬性爲 url ，像這樣：

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

自定義驗證

AngularJS能夠很容易的使用指令來添加自定義驗證。例如，咱們要驗證咱們的用戶名是可用的（在數據庫中不重複）。要作到這一點，咱們將實現一個指令，它在輸入字符變化時觸發一個Ajax請求：

var app = angular.module('validationExample', []); app.directive('ensureUnique', ['$http', function($http) { return { require: 'ngModel', link: function(scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function() { $http({ method: 'POST', url: '/api/check/' + attrs.ensureUnique, data: {'field': attrs.ensureUnique} }).success(function(data, status, headers, cfg) { c.$setValidity('unique', data.isUnique); }).error(function(data, status, headers, cfg) { c.$setValidity('unique', false); }); }); } } }]);

驗證表單狀態

AngularJS將DOM驗證的結果保存在$scope對象中。這使咱們可以實時作出一些響應。提供給咱們的屬性有：

請注意，這是這個屬性的格式：

formName.inputFieldName.property

未修改過的表單

布爾值屬性，表示用戶是否修改了表單。若是爲 ture ，表示沒有修改過； false 表示修改過：

formName.inputFieldName.$pristine;

修改的表單

布爾型屬性，當且僅當用戶實際已經修改的表單。無論表單是否經過驗證：

formName.inputFieldName.$dirty

通過驗證的表單

布爾型屬性，它指示表單是否經過驗證。若是表單當前經過驗證，他將爲 true ：

formName.inputFieldName.$valid

未經過驗證的表單

布爾型屬性，它指示表單是否經過驗證。若是表單當前沒有經過驗證，他將爲 true：

formName.inputFieldName.$invalid

最後兩個屬性在用於DOM元素的顯示或隱藏時是特別有用的。同時，若是要設置特定的class時，他們也很是有用的。

錯誤

另外一個有用的屬性是AngularJS提供給咱們的$error對象。這個對象包含 input 的每個驗證是有效的仍是無效的（一個集合）。爲了訪問這個屬性，使用下面的語法：

formName.inputfieldName.$error

若是驗證失敗，則此屬性將是true的，而若是它是false的，那麼該值經過驗證的。

無害的一些樣式

當AngularJS處理的表單驗證時，它將根據驗證的狀態增長一些特定的class屬性。這些class被命名爲相似的屬性，咱們能夠檢查。

.ng-pristine {}
.ng-dirty {} .ng-valid {} .ng-invalid {}

這些class對應着其對應的驗證對象的結果。

當一個字段是無效的，   .ng-invalid 將被應用到這個字段上。咱們能夠經過css來設置這些class的樣式:

input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; }

所有放在一塊兒

讓咱們編寫一個註冊表單。本申請表單將包括這我的的名字，他們的電子郵件，以及所需的用戶名。

讓咱們定義一個 form 表單:

<form name="signup_form" novalidate ng-submit="signupForm()"> <fieldset> <legend>Signup</legend> <button type="submit" class="button radius">Submit</button> </fieldset> </form>

這個表單的名字是 signup_form   ，當咱們點擊提交時咱們將調用 signupForm()方法 .

如今，讓咱們添加用戶的 Name 屬性:

<div class="row"> <div class="large-12 columns"> <label>Your name</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> </div> </div>

  首先我想說明我使用了  Foundation  做爲個人css框架，因此你將在代碼中看到它的相關語法。 咱們增長了一個名字爲name的輸入框，而且對象綁定在 $scope 對象的signup.name 對象上（經過ng-model）。

咱們還設置了幾個驗證。這些驗證分別是：咱們必須有一個長度爲3個或更多字符的名字。而且最大長度限制爲20個字符（21或更多的個字符將是無效的）。最後，咱們設置名稱應該是必填的。

當若是表單無效時，讓咱們用屬性來控制顯示仍是隱藏錯誤列表。咱們還將使用 $dirty 屬性，以確保當用戶沒有輸入字符前錯誤提示不顯示：

<div class="row"> <div class="large-12 columns"> <label>Your name</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid"> <small class="error" ng-show="signup_form.name.$error.required"> Your name is required. </small> <small class="error" ng-show="signup_form.name.$error.minlength"> Your name is required to be at least 3 characters </small> <small class="error" ng-show="signup_form.name.$error.maxlength"> Your name cannot be longer than 20 characters </small> </div> </div> </div>

在以前，當輸入內容改變時它只能告訴咱們咱們輸入是否有效。這一次，咱們將看到當那些沒有經過的驗證時的錯誤信息。

讓咱們來看看接下來的驗證，一個電子郵件:

<div class="row"> <div class="large-12 columns"> <label>Your email</label> <input type="email" placeholder="Email" name="email" ng-model="signup.email" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid"> <small class="error" ng-show="signup_form.email.$error.required"> Your email is required. </small> <small class="error" ng-show="signup_form.email.$error.minlength"> Your email is required to be at least 3 characters </small> <small class="error" ng-show="signup_form.email.$error.email"> That is not a valid email. Please input a valid email. </small> <small class="error" ng-show="signup_form.email.$error.maxlength"> Your email cannot be longer than 20 characters </small> </div> </div> </div>

這一次（包括整個表單），咱們編寫電子郵件字段。請注意，咱們設置了input的type屬性爲email而且添加了 $error.email 錯誤信息。這是基於AngularJS的電子郵件驗證（使用HTML5的屬性）。

最後，讓咱們來看看在咱們的最後一個輸入框，用戶名：

<div class="large-12 columns"> <label>Username</label> <input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength=3 ng-maxlength=20 ensure-unique="username" required /> <div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid"> <small class="error" ng-show="signup_form.username.$error.required">Please input a username</small> <small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small> <small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small> <small class="error" ng-show="signup_form.username.$error.unique">That username is taken, please try another</small> </div> </div>

在咱們的最後一個字段，咱們使用咱們以前編寫的自定義驗證。這個自定義驗證使用的AngularJS指令：

app.directive('ensureUnique', ['$http', function($http) { return { require: 'ngModel', link: function(scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function() { $http({ method: 'POST', url: '/api/check/' + attrs.ensureUnique, data: {'field': attrs.ensureUnique} }).success(function(data, status, headers, cfg) { c.$setValidity('unique', data.isUnique); }).error(function(data, status, headers, cfg) { c.$setValidity('unique', false); }); }); } } }]);

當表單輸入是有效的時，它將發送POST api/check/username請求到服務器來檢查用戶名是否可用。如今，很明顯，由於咱們在這裏只談論前端代碼，咱們沒有爲後端編寫測試，儘管很容易。

更新:  根據評論的意見，我已經加入了服務器超時檢查。要查看完整的源代碼，請點擊 here 。

最後，咱們加上提交按鈕，咱們可使用ng-disabled指令來根據驗證是否有效控制按鈕的禁用和啓用：

<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>

正如咱們上面所說的，表單是否有效的屬性 $invalid 給咱們提供了便利。

更新 2:  雖然當即驗證是很棒的，它能夠當即提醒用戶，可是當他們正在輸入很長的能經過驗證的文字時，他們講在輸入中途看到錯誤提示。你能夠更好的來處理這一點。當用戶點擊提交時，或者當他們將光標移開輸入框以後。讓咱們來看看這2種方式。

點擊提交後顯示驗證信息

要在用戶試圖提交表單時顯示的驗證，你能夠經過在scope中設置一個'submitted'值，並檢查該值來控制顯示錯誤。

例如，讓咱們來看看第一個例子，只有在點擊提交表單時才顯示錯誤。使用 ng-show 指令來控制顯示，咱們能夠添加一個檢查，看是否已點擊提交按鈕：

<form name="signup_form" novalidate ng-submit="signupForm()"> <fieldset> <legend>Signup</legend> <div class="row"> <div class="large-12 columns"> <label>Your name</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted"> <small class="error" ng-show="signup_form.name.$error.required"> Your name is required. </small> <small class="error" ng-show="signup_form.name.$error.minlength"> Your name is required to be at least 3 characters </small> <small class="error" ng-show="signup_form.name.$error.maxlength"> Your name cannot be longer than 20 characters </small> </div> </div> </div> <button type="submit" class="button radius">Submit</button> </fieldset> </form>

 如今，那個錯誤信息的div只將在 signup_form.submitted 爲 true 時 顯示。咱們能夠這樣實現這個 signupForm 方法：

app.controller('signupController', ['$scope', function($scope) { $scope.submitted = false; $scope.signupForm = function() { if ($scope.signup_form.$valid) { // Submit as normal } else { $scope.signup_form.submitted = true; } } }]);

如今，當用戶嘗試提交表單而且同時有一個無效的元素時，你能夠捕獲它，並告訴他們錯誤的緣由。

當時去焦點時驗證錯誤

若是你想保留錯誤驗證的實時性，那麼能夠在用戶離開該輸入框時顯示錯誤信息。要作到這一點，咱們能夠添加一個指令，將添加一個新的變量。

咱們使用 ngFocus 指令，它看起來像：

app.directive('ngFocus', [function() { var FOCUS_CLASS = "ng-focused"; return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ctrl) { ctrl.$focused = false; element.bind('focus', function(evt) { element.addClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused = true;}); }).bind('blur', function(evt) { element.removeClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused = false;}); }); } } }]);

要使用 ngFocus ，咱們只須要簡單加上這個指令到輸入框元素上，像這樣：

<input ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}" type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required ng-focus />

加上 ngFocus 指令後，將在輸入框的blur和focus事件中註冊相應操做，當焦點在該輸入框時，它添加一個class（ng-focused），而且該輸入框的$focused屬性也將變爲true。所以，你能夠根據需求是否在焦點上來個性化設置顯示錯誤消息。例如：

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused">

我但願這篇文章能夠告訴你如何的很酷的使用AngularJS來進行表單驗證。