亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

angular表單驗證2

darkbug / 1495人閱讀

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

前言

在之前的文章《angular表單驗證》中主要介紹了一些關(guān)于angular表單驗證的基礎(chǔ)知識。在此篇中將著重以擴(kuò)展angular表單驗證的相關(guān)內(nèi)容和實際開發(fā)中的應(yīng)用為主。

表單驗證使用場景1

在實際的開發(fā)中我們可能會有這樣的情況。我們希望可以在用戶輸入完成之后失去焦點之后進(jìn)行驗證。如果驗證不通過則提交錯誤信息。如果想要實現(xiàn)這個效果。需要添加一個自定義的指令。

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添加了對應(yīng)的行為。添加了一個名為ng-foucsed的類并將$focused的值設(shè)置為true。接下來，可以根據(jù)表單是否具有焦點來展示獨立的錯誤信息。如下

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

angular新版本的表單驗證

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

ng-messages

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

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

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

/*old*/





Signup








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















/*new*/











姓名不能為空


姓名太短


姓名太長

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



姓名不能為空


姓名太短


姓名太長

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



姓名不能為空


姓名太短


姓名太長

然后我們可以在視圖中使用 ng-messages-include 屬性來引入這個模板來改進(jìn)表單的結(jié)構(gòu)

上面的示例當(dāng)中都是使用angular自帶的驗證和ng-messages結(jié)合使用。那自定義驗證如何操作呢？
比方說我想要創(chuàng)建一個自定義驗證來實現(xiàn)驗證表單中的用戶名是否被注冊：

/*首先創(chuàng)建一個自定義指令*/
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*/











姓名不能為空


checking


用戶名已經(jīng)存在

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

結(jié)尾

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78763.html

相關(guān)文章

  • angular6的響應(yīng)式表單

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

    alogy 評論0 收藏0

  • angular6的響應(yīng)式表單

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

    hzc 評論0 收藏0

  • angular6的響應(yīng)式表單

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

    MycLambert 評論0 收藏0

  • angular4 學(xué)習(xí)記錄 -- 表單

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

    james 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<