angular表單驗證2

darkbug 發布于2019-08-19 17:41 / 1434人閱讀

摘要：表單驗證使用場景在實際的開發中我們可能會有這樣的情況。姓名不能為空姓名太短姓名太長姓名不能為空姓名太短姓名太長借助表單本身比之前的更簡單了。結尾以上就是關于表單驗證的全部內容。

前言

在之前的文章《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元素上就可以使用這個指令。

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

當然也可以在ngModel控制中使用$isEmpty()方法來判斷輸入的字段是否為空。當輸入字段為空時返回true否則返回false。

angular新版本的表單驗證

在之前的代碼中angular的表單驗證是相對比較復雜的組件。用起來并不是特別的方便。也不夠簡潔。
但是在新得angular版本以后（1.3+）我們可以使用更簡單的方式來做表單驗證。

ng-messages

要使用ng-messages這個指令。我們必須先安裝這個模塊。我們可以自己下載下來直接引用到頁面上，或者使用
$bower install --save angular-messages 來安裝
，安裝完成之后呢。我們需要注入到模塊中

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

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

/*old*/



Signup


Your name


姓名不能為空
姓名太短
姓名太長










/*new*/



Your name


姓名不能為空
姓名太短
姓名太長

借助ngMessages 表單本身比之前的更簡單了。并且更好理解。但是在上面的代碼中還有一個問題，就是一次只能顯示一個錯誤信息。
如果我們想同時顯示所有的錯誤信息。也簡單，我們只需在ng-messages 指令旁邊加上 ng-messages-multiple


姓名不能為空
姓名太短
姓名太長

如果我們有很多的表單頁的話。我們可以把一些通用的驗證提示封裝套一個模板頁面中


姓名不能為空
姓名太短
姓名太長

然后我們可以在視圖中使用 ng-messages-include 屬性來引入這個模板來改進表單的結構

上面的示例當中都是使用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*/



Your name


姓名不能為空
checking
用戶名已經存在

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

結尾

以上就是關于angular表單驗證的全部內容。本文作為自己的筆記的方式寫了下來。文中的如有不足之處請指出。如果有問題的話可以留言。謝謝。

GPU云服務器云服務器驗證表單表單驗證表單驗證代碼表單驗證實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78763.html

angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 評論0 收藏0
angular4 學習記錄 -- 表單

摘要：在表單上添加的會攔截標準的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象。用于跟蹤一個單獨的表單控件的值和有效性狀態。組件中的頂級表單就是一個。在表單所在的中的上添加，再在指定的驗證方法中調用來顯示驗證失敗信息。 angular4 表單模板表單在app.module中導入FormsModule之后，項目中的form表單都會是一個ngForm，也就是一個模板表...

james 2019-08-21 16:45 評論0 收藏0