首頁 web前端 js教程 AngularJS表單驗證功能實作方法

AngularJS表單驗證功能實作方法

Jan 09, 2018 am 10:33 AM
angularjs javascript 實現

本文主要為大家詳細介紹了AngularJS表單驗證功能,具有一定的參考價值,有興趣的小夥伴們可以參考一下,希望能幫助到大家。

        能夠根據使用者在表單中輸入的內容給予即時視覺回饋是非常重要的。在人與人溝通的脈絡中,表單驗證給予的回饋同獲得正確輸入同等重要。

  表單驗證不僅能提供使用者有用的回饋,同時也能保護我們的網路應用程式不會被惡意或錯誤的輸入所破壞。我們要在Web前端盡力保護後端。

  AngularJS能夠將HTML5表單驗證功能同它自己的驗證指令結合起來使用,並且非常方便。 AngularJS提供了許多表單驗證指令。

<form name="form" novalidate>
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>
登入後複製

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

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

  如果想要封鎖瀏覽器對表單的預設驗證行為,可以在表單元素上新增novalidate 標籤

1. 必填項required

#  驗證某個表單輸入是否已填寫,只要在輸入欄位元素上新增HTML5標記required 即可:

  註解:required 屬性適用於以下 類型:text, search, url, telephone, email, password, date pickers , number, checkbox, radio 以及file

<input type="text" required />
登入後複製

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

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

<input type="text" ng-minlength="5" /> 
登入後複製

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

  驗證表單輸入的文字長度是否小於或等於某個最大值,在輸入欄位上使用AngularJS指令ng-maxlength="{number}"

<input type="text" ng-maxlength="20" />
登入後複製

4. 模式比對  ng-pattern="/PATTERN/"

        ng-pattern ="/PATTERN/" 來確保輸入能夠符合指定的正規表示式:

<input type="text" ng-pattern="[a-zA-Z]" />  
登入後複製

5. 電子郵件

  驗證輸入內容是否為電子郵件,只要像下面這樣將input 的類型設定為email 即可:

<input type="email" name="email" ng-model="user.email" />
登入後複製

6. 數字

  驗證輸入內容是否為數字,將input 的類型設為number :

<input type="number" name="age" ng-model="user.age" />
登入後複製

 

# 7. URL

  驗證輸入內容是否為URL,將input 的類型設為url :

<input type="url" name="homepage" ng-model="user.facebook_url" />
登入後複製

在表單中控制變數

  表單的屬性可以在其所屬的$scope 物件中存取到,而我們可以存取$scope 對象,因此JavaScript可以間接地存取DOM中的表單屬性。借助這些屬性,我們可以對表單做出即時(和AngularJS中其他東西一樣)回應。這些屬性包括下面這些。 (注意,可以使用下面的格式存取這些屬性。)

formName.inputFieldName.property 

■未修改的表單

  這是一個布林屬性,用來判斷使用者是否修改了表單。如果未修改,值為true ,如果修改過值為false

formName.inputFieldName.$pristine 

■修改過的表單

#   用戶修改過表單,無論輸入是否經過驗證,該值都會傳回true

formName.inputFieldName.$dirty 

 ■合法的表單

  這個布林型的屬性用來判斷表單的內容是否合法。如果目前表單內容是合法的,下面屬性的值就是true :

formName.inputFieldName.$valid 

■ 不合法的表單

  這個布林屬性用來判斷表單的內容是否不合法。如果目前表單內容是不合法的,下面屬性的值為true :

formName.inputFieldName.$invalid

■ 錯誤

  這是AngularJS提供的另外一個非常有用的屬性: $error 物件。它包含當前表單的所有驗證內容,以及它們是否合法的資訊。用下面的語法存取這個屬性:

formName.inputfieldName.$error  

$parsers

  當使用者同控制器進行交互,並且ngModelController 中的$setViewValue()方法被呼叫時,$parsers 數組中的函數會以流水線的形式被逐一調用。第一個$parse 被呼叫後,執行結果會傳遞給第二個$parse ,以此類推

  這些函數可以對輸入值進行轉換,或者透過$setValidity() 函數設定表單的合法性。

  使用 $parsers 陣列是實現自訂驗證的途徑之一。

  例如,假設我們想要確保輸入值在某兩個數值之間,可以在 $parsers 陣列中入堆疊一個新的函數,這個函數會在驗證鏈中被呼叫。

  每個 $parser 傳回的值都會被傳入下一個 $parser 中。當不希望資料模型發生更新時回傳undefined 。 

 html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单测试</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="angular.1.2.13.js"></script>
</head>
<body>
  <p ng-controller="TestController">
    <form name="testForm">
      <input type="number" name="inputs" ng-test ng-model="obj.number">
      <span ng-show="testForm.inputs.$error.test">good</span>
      <span ng-hide="testForm.inputs.$error.test">bad</span>
      <p>{{ testForm.inputs.$valid }}</p>
      <p>{{ testForm.inputs.$invalid }}</p>
      <p>{{ obj.number }}</p>
    </form>
  </p>
  <script type="text/javascript" src="test5app.js"></script>
</body>
</html>
登入後複製

javascript  ( test5app.js )

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
        }
      })
    }
  }
});
登入後複製

相關推薦:

jquery.validate表單驗證外掛程式介紹

AngularJS實作的取得焦點及失去焦點時的表單驗證功能詳解

#實例詳解jQuery完成表單驗證功能

以上是AngularJS表單驗證功能實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

PHP程式設計指南:實作斐波那契數列的方法

掌握Golang如何實現遊戲開發的可能性 掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

掌握Golang如何實現遊戲開發的可能性

PHP遊戲需求實作指南 PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實作指南

如何在Golang中實現精確除法運算 如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

如何在Golang中實現精確除法運算

利用Golang實現資料導出功能詳解 利用Golang實現資料導出功能詳解 Feb 28, 2024 pm 01:42 PM

利用Golang實現資料導出功能詳解

使用PHP實作SaaS:全面解析 使用PHP實作SaaS:全面解析 Mar 07, 2024 pm 10:18 PM

使用PHP實作SaaS:全面解析

See all articles