成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

angular表單驗(yàn)證2

darkbug / 1466人閱讀

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

前言

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

表單驗(yàn)證使用場(chǎng)景1

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

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元素上就可以使用這個(gè)指令。

ngFocus指令給表單輸入字段的blur和focus添加了對(duì)應(yīng)的行為。添加了一個(gè)名為ng-foucsed的類并將$focused的值設(shè)置為true。接下來(lái)，可以根據(jù)表單是否具有焦點(diǎn)來(lái)展示獨(dú)立的錯(cuò)誤信息。如下

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

angular新版本的表單驗(yàn)證

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

ng-messages

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

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

為了對(duì)比之前的表單驗(yàn)證方式，這里我先使用老版本的表單驗(yàn)證寫一個(gè)例子。

/*old*/





Signup








姓名不能為空
姓名太短
姓名太長(zhǎng)















/*new*/











姓名不能為空


姓名太短


姓名太長(zhǎng)

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



姓名不能為空


姓名太短


姓名太長(zhǎng)

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



姓名不能為空


姓名太短


姓名太長(zhǎng)

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

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

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

/*頁(yè)面html*/











姓名不能為空


checking


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

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

結(jié)尾

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78763.html

相關(guān)文章

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

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

    alogy 評(píng)論0 收藏0

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

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

    hzc 評(píng)論0 收藏0

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

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

    MycLambert 評(píng)論0 收藏0

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

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

    james 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<