小編給大家分享一下AngularJS中如何實現(xiàn)表單驗證功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括鶴城網(wǎng)站建設(shè)、鶴城網(wǎng)站制作、鶴城網(wǎng)頁制作以及鶴城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鶴城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鶴城省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

        能夠根據(jù)用戶在表單中輸入的內(nèi)容給出實時視覺反饋是非常重要的。在人與人溝通的語境中，表單驗證給出來的反饋同獲得正確輸入同等重要。

　　表單驗證不僅能給用戶提供有用的反饋，同時也能保護我們的Web應(yīng)用不會被惡意或者錯誤的輸入所破壞。我們要在Web前端盡力保護后端。

　　AngularJS能夠?qū)TML5表單驗證功能同它自己的驗證指令結(jié)合起來使用，并且非常方便。AngularJS提供了很多表單驗證指令。

  Your email
  

要使用表單驗證，首先要確保表單像上面的例子一樣有一個 name 屬性。

　　所有輸入字段都可以進行基本的驗證，比如大、最小長度等。這些功能是由新的HTML5表單屬性提供的。

　　如果想要屏蔽瀏覽器對表單的默認驗證行為，可以在表單元素上添加 novalidate 標記

1. 必填項 required

　　驗證某個表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標記 required 即可：

　　注釋：required 屬性適用于以下 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

2. 最小長度 ng-minleng="{number}"

　　驗證表單輸入的文本長度是否大于某個最小值，在輸入字段上使用AngularJS指令 ng-minleng="{number}"

3. 大長度 ng-maxlength="{number}"

　　驗證表單輸入的文本長度是否小于或等于某個大值，在輸入字段上使用AngularJS指令 ng-maxlength="{number}"

4. 模式匹配  ng-pattern="/PATTERN/"

        使用 ng-pattern="/PATTERN/" 來確保輸入能夠匹配指定的正則表達式：

5. 電子郵件

　　驗證輸入內(nèi)容是否是電子郵件，只要像下面這樣將 input 的類型設(shè)置為 email 即可：

6. 數(shù)字

　　驗證輸入內(nèi)容是否是數(shù)字，將 input 的類型設(shè)置為 number ：

7. URL

　　驗證輸入內(nèi)容是否是URL，將 input 的類型設(shè)置為 url ：

在表單中控制變量

　　表單的屬性可以在其所屬的 $scope 對象中訪問到，而我們又可以訪問 $scope 對象，因此JavaScript可以間接地訪問DOM中的表單屬性。借助這些屬性，我們可以對表單做出實時(和AngularJS中其他東西一樣)響應(yīng)。這些屬性包括下面這些。(注意，可以使用下面的格式訪問這些屬性。)

formName.inputFieldName.property 

■未修改的表單

　　這是一個布爾屬性，用來判斷用戶是否修改了表單。如果未修改，值為 true ，如果修改過值為 false

formName.inputFieldName.$pristine 

■修改過的表單

　　只要用戶修改過表單，無論輸入是否通過驗證，該值都返回 true

formName.inputFieldName.$dirty 

 ■合法的表單

　　這個布爾型的屬性用來判斷表單的內(nèi)容是否合法。如果當(dāng)前表單內(nèi)容是合法的，下面屬性的值就是 true ：

formName.inputFieldName.$valid 

■ 不合法的表單

　　這個布爾屬性用來判斷表單的內(nèi)容是否不合法。如果當(dāng)前表單內(nèi)容是不合法的，下面屬性的值為 true ：

formName.inputFieldName.$invalid

■ 錯誤

　　這是AngularJS提供的另外一個非常有用的屬性： $error 對象。它包含當(dāng)前表單的所有驗證內(nèi)容，以及它們是否合法的信息。用下面的語法訪問這個屬性：

formName.inputfieldName.$error  

$parsers

　　當(dāng)用戶同控制器進行交互，并且 ngModelController 中的 $setViewValue() 方法被調(diào)用時，$parsers 數(shù)組中的函數(shù)會以流水線的形式被逐個調(diào)用。第一個 $parse 被調(diào)用后，執(zhí)行結(jié)果會傳遞給第二個 $parse ，以此類推

　　這些函數(shù)可以對輸入值進行轉(zhuǎn)換，或者通過 $setValidity() 函數(shù)設(shè)置表單的合法性。

　　使用 $parsers 數(shù)組是實現(xiàn)自定義驗證的途徑之一。

　　例如，假設(shè)我們想要確保輸入值在某兩個數(shù)值之間，可以在 $parsers 數(shù)組中入棧一個新的函數(shù)，這個函數(shù)會在驗證鏈中被調(diào)用。

　　每個 $parser 返回的值都會被傳入下一個 $parser 中。當(dāng)不希望數(shù)據(jù)模型發(fā)生更新時返回undefined 。 

 html

  
  
  
  
  


  
    
      
      good
      bad
      
{{ testForm.inputs.$valid }}
      
{{ testForm.inputs.$invalid }}
      
{{ obj.number }}
    
  

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});