這篇文章給大家分享的是有關(guān)AngularJS怎么實(shí)現(xiàn)表單驗(yàn)證功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),清遠(yuǎn)企業(yè)網(wǎng)站建設(shè),清遠(yuǎn)品牌網(wǎng)站建設(shè),網(wǎng)站定制,清遠(yuǎn)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,清遠(yuǎn)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

具體如下：

在AngularJS的管轄下，每個(gè)表單form都會(huì)創(chuàng)建一個(gè)ngFormController的一個(gè)實(shí)例。在表單里面的每個(gè)input都會(huì)創(chuàng)建一個(gè)在這個(gè)實(shí)例下的ngModelController實(shí)例，用以控制每個(gè)input的行為。

首先先從簡單的驗(yàn)證開始。

AngularJs的ngModelController提供了幾種屬性：$pristine;$dirty;$valid;$invalid;$error

pristine：表單并沒有改變。
dirty：表單改變了。
valid：全部控件符合驗(yàn)證規(guī)則。
invalid：至少有一個(gè)控件不符合驗(yàn)證規(guī)則。
error：有錯(cuò)，但是不知道什么錯(cuò)。

創(chuàng)建一個(gè)表單如下：

<form name="userForm" method="#" action="#">
  <label for="name">用戶名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span ng-show="userForm.name.$error.pattern">用戶名必須XXXX</span>
</form>

首先每個(gè)form都要有自己的name。通過這個(gè)name來對(duì)自己下面的input進(jìn)行控制。而后，每個(gè)input標(biāo)簽都要有自己的name。name是很關(guān)鍵的一步，被用于識(shí)別每個(gè)不同的input，從而識(shí)別不同的ngModelController。使用pattern來設(shè)置自己的正則表達(dá)式規(guī)則。使用$error來檢測這個(gè)正則表達(dá)式是否正確。并把它賦予給ng-show指令。如果有錯(cuò)，整個(gè)$error 就會(huì)返回true，顯示設(shè)置好的提示信息，一直到正則表達(dá)式通過，$error返回false，ng-show 對(duì)其進(jìn)行隱藏。

以上的簡單例子是沒有自己去重新設(shè)置控制器的行為，一切都是AngularJs默認(rèn)的。可以看到ng-show里面的判斷代碼其實(shí)是可以交給后面的JS完成的，這樣可以看到ngModelController的具體過程。

<!--html-->
<form name="userForm" ng-controller="main" method="#" action="#">
  <label for="name">用戶名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span  ng-show="showError(userForm.name,'pattern')">用戶名必須XX</span>
  <span  ng-show="showSuccess(userForm.name)">成功！</span>
  <!--對(duì)按鈕進(jìn)行動(dòng)態(tài)鎖定-->
  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button>
</form>

/*JS*/
app.controller("main",function($scope){
  $scope.showError=function(ngModelController,abc){
    return ngModelController.$error[abc];
  };
  $scope.showSuccess=function(ngModelController){
    return ngModelController.$valid; /*至少有1錯(cuò)誤，返回false，無錯(cuò)誤，返回true*/
  };
   $scope.submit=function(ngFormController){
    return ngFormController.$invalid; /*valid的取反*/
  };
});

這里直接在控制器里面的ngModelController里進(jìn)行判斷。里面有一個(gè)坑，就是判斷$valid 等等這類屬性是沒有帶參數(shù)的。而判斷$error 則需要表明“判斷什么”，我傳了自己的一個(gè)正則表達(dá)式給他。

AngularJs還可以對(duì)表單的提交按鈕進(jìn)行“鎖定”。但要注意的是，此時(shí)BUTTON對(duì)應(yīng)的Controller不再是針對(duì)某一個(gè)input的ngModelController，而是針對(duì)整個(gè)form的ngFormController了，因此，里面的$invalid 是判斷所有的input有沒有問題，全部都沒問題的時(shí)候才會(huì)解鎖。

思考：正則表達(dá)式或者minlength類似這種限制，能否寫在JS文件里面。

感謝各位的閱讀！關(guān)于“AngularJS怎么實(shí)現(xiàn)表單驗(yàn)證功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：AngularJS怎么實(shí)現(xiàn)表單驗(yàn)證功能
路徑分享：http://jinyejixie.com/article30/pdcoso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、動(dòng)態(tài)網(wǎng)站、微信公眾號(hào)、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)