angular表單驗證2

前言

在以前的文章《angular表單驗證》中主要介紹了一些關於angular表單驗證的基礎知識。在此篇中將着重以擴展angular表單驗證的相關內容和實際開發中的應用爲主。

---

表單驗證使用場景1

在實際的開發中咱們可能會有這樣的狀況。咱們但願能夠在用戶輸入完成以後失去焦點以後進行驗證。若是驗證不經過則提交錯誤信息。若是想要實現這個效果。須要添加一個自定義的指令。

app.directive('ngFoucus',[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元素上就能夠使用這個指令。

<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="200
required"
ng-focus
/>

ngFocus指令給表單輸入字段的blur和focus添加了對應的行爲。添加了一個名爲ng-foucsed的類並將$focused的值設置爲true。接下來，能夠根據表單是否具備焦點來展現獨立的錯誤信息。以下

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

固然也能夠在ngModel控制中使用$isEmpty()方法來判斷輸入的字段是否爲空。當輸入字段爲空時返回true不然返回false。

angular新版本的表單驗證

在以前的代碼中angular的表單驗證是相對比較複雜的組件。用起來並非特別的方便。也不夠簡潔。
可是在新得angular版本之後（1.3+）咱們能夠使用更簡單的方式來作表單驗證。

ng-messages

要使用ng-messages這個指令。咱們必須先安裝這個模塊。咱們能夠本身下載下來直接引用到頁面上，或者使用
$bower install --save angular-messages 來安裝
，安裝完成以後呢。咱們須要注入 到模塊中

angular.module('myapp',['ngMessages'])

爲了對比以前的表單驗證方式，這裏我先使用老版本的表單驗證寫一個例子。

/*old*/

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<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&&gignup_form.name&invalid&&signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">姓名不能爲空</small>
<small class="error" ng-show="signup_form.name.$error.minlength">姓名過短</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">姓名太長</small>
</div>
</div>
</div>
</fieldset>
</form>





/*new*/
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<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-messages="signup_form.name.$error">
<div ng-message="required">姓名不能爲空</div>
<div ng-message="minlength">姓名過短</div>
<div ng-message="maxlength">姓名太長</div>
</div>
</div>
</div>
</form>

藉助ngMessages 表單自己比以前的更簡單了。而且更好理解。可是在上面的代碼中還有一個問題，就是一次只能顯示一個錯誤信息。
若是咱們想同時顯示全部的錯誤信息。也簡單，咱們只需在ng-messages 指令旁邊加上 ng-messages-multiple

<div class="error" ng-messages="signup_form.name.$error"  ng-messages-multiple>
<div ng-message="required">姓名不能爲空</div>
<div ng-message="minlength">姓名過短</div>
<div ng-message="maxlength">姓名太長</div>
</div>

若是咱們有不少的表單頁的話。咱們能夠把一些通用的驗證提示封裝套一個模板頁面中

<!--in temples/errors.html-->
<div ng-message="required">姓名不能爲空</div>
<div ng-message="minlength">姓名過短</div>
<div ng-message="maxlength">姓名太長</div>

而後咱們能夠在視圖中使用 ng-messages-include 屬性來引入這個模板來改進表單的結構

<div class="error" ng-messages="signup_form.name.$error"  ng-messages-include="templates/errors.html"></div>

上面的示例當中都是使用angular自帶的驗證和ng-messages結合使用。那自定義驗證如何操做呢？
比方說我想要建立一個自定義驗證來實現驗證表單中的用戶名是否被註冊：

/*首先建立一個自定義指令*/
app.directive('ensureUnique',function($http){
return {
require:'ngmodel',
link:function(scope,ele,attrs,ctrl){
var url=attrs.ensureUnique;
   ctrl.$parsers.push(function(val){
 if(!val||val.length==0)
retrun;
});
ngModel.$setValidity('checkingAvailability',true);
ngModel.$setValidity('usernameAvailablity',false);
$http({
 Method:'GET',
url:url,
params:{
username:val}
}).success(function(){
 ngModel.$setValidity('checkingAvailability',false);
ngModel.$setValidity('usernameAvailablity',true);
})['catch'](function(){
 ngModel.$setValidity('checkingAvailability',false);
ngModel.$setValidity('usernameAvailablity',false);
});
retrun val;
}
}
});

/*頁面html*/
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController" ensure-unique='/api/checkUsername.php'>
<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-messages="signup_form.name.$error">
<div ng-message="required">姓名不能爲空</div>
<div ng-message="checkingAvailability">checking</div>
<div ng-message="usernameAvailablity">用戶名已經存在</div>
</div>
</div>
</div>
</form>

在上面的用法中咱們檢查了錯誤信息的自定義屬性。爲了添加自定義的錯誤信息，咱們將會把它們應用到自定義的ensureUnique指令的ngModel中。
這樣一個自定義驗證就完成了。在這裏我只是演示了一個自定義驗證的用法。angular的ng-messages還有不少其餘的高級用法這裏就再也不一一介紹了。有興趣的同窗能夠去angular官網查看文檔。

結尾

以上就是關於angular表單驗證的所有內容。本文做爲本身的筆記的方式寫了下來。文中的若有不足之處請指出。若是有問題的話能夠留言。謝謝。