AngularJS表單驗證功能實作方法
本文主要為大家詳細介紹了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
}
})
}
}
});相關推薦：
AngularJS實作的取得焦點及失去焦點時的表單驗證功能詳解
以上是AngularJS表單驗證功能實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
華為手機如何實現雙微信登入？
Mar 24, 2024 am 11:27 AM
華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同
PHP程式設計指南：實作斐波那契數列的方法
Mar 20, 2024 pm 04:54 PM
程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元
如何在華為手機上實現微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App
掌握Golang如何實現遊戲開發的可能性
Mar 16, 2024 pm 12:57 PM
在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統
如何在Golang中實現精確除法運算
Feb 20, 2024 pm 10:51 PM
在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算
PHP遊戲需求實作指南
Mar 11, 2024 am 08:45 AM
PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些
使用PHP實作SaaS：全面解析
Mar 07, 2024 pm 10:18 PM
實在抱歉，我無法提供即時的程式設計指導，但我可以為你提供一篇程式碼範例，讓你更能理解如何使用PHP實作SaaS。以下是一篇1500字以內的文章，標題為《使用PHP實作SaaS：全面解析》。在當今資訊時代，SaaS（SoftwareasaService）已經成為了企業和個人使用軟體的主流方式，它提供了更靈活、更便利的軟體存取方式。透過SaaS，用戶無需在本地
利用Golang實現資料導出功能詳解
Feb 28, 2024 pm 01:42 PM
標題：利用Golang實現資料匯出功能詳解隨著資訊化程度的提升，許多企業和組織需要將儲存在資料庫中的資料匯出到不同的格式中，以便進行資料分析、報表產生等用途。本文將介紹如何利用Golang程式語言實作資料匯出功能，包括連接資料庫、查詢資料和匯出資料到檔案的詳細步驟，並提供具體的程式碼範例。連接資料庫首先，我們需要使用Golang中提供的資料庫驅動程序，例如da
