AngularJS快速入門指南14 資料驗證

angularjs表單和控制項可以對使用者輸入的資料進行驗證。

angularjs表單和控制項可以提供資料驗證服務，並對不合法的資料給出提示資訊。

請注意任何情況下都不能僅靠客戶端的資料驗證，服務端資料驗證也是必須的。

doctype html

>
<
html
>
<
script 
src=""
>
script
>
<
body
>
<
h2>validation example
h2>
<
form  
ng-controller
="validatectrl"
name
="myform"
novalidate
>
<
p>username:<
br>
<
input 
type
="text"
name
="user"
ng-model
="user"
required
>
<
span 
style
="color:red"
ng-show
="myform.user.$dirty && myform.user.$invalid"
>
<
span 
ng-show
="myform.user.$error.required"
>username is required.
span
>
span
>
p>
<
p>email:<
br>
<
input 
type
="email"
name
="email"
ng-model
="email"
required
>
<
span 
style
="color:red"
ng-show
="myform.email.$dirty && myform.email.$invalid"
>
<
span 
ng-show
="myform.email.$error.required"
>email is required.
span
>
<
span 
ng-show
="myform.email.$error.email"
>invalid email address.
span
>
span
>
p>
<
p>
<
input 
type
="submit"
ng-disabled
="myform.user.$dirty && myform.user.$invalid ||
myform.email.$dirty && myform.email.$invalid"
>
p>
form
>
<
script
>
var=
angular.module(''
, );
'validatectrl', 
function
($scope) );
script
>
body
>
html
>

novalidate屬性表示禁用瀏覽器預設的資料驗證功能。

angularjs指令ng-model將input標籤繫結到模型中。

模型物件有兩個屬性：user和email。

通過使用ng-show指令來顯示或隱藏元素，該元素的字型被設定成紅色，當user或email是$dirty和$invalid時顯示。

過濾器描述

$dirty

表示當前field中的內容被修改過。

$valid

表示當前field中的內容是有效的。

$invalid

表示當前field中的內容是無效的。

$pristine

表示當前field中的內容還沒有被修改。

AngularJS快速入門指南11 事件

angularjs擁有自己的html事件指令。ng click指令定義了angularjs的click事件。div ng controller myctrl button ng click count count 1 click me button p p div 執行 ng hide true 將...

AngularJS快速入門指南01 導言

angularjs使用新的attributes擴充套件了html angularjs對單頁面應用的支援非常好 spas angularjs非常容易學習 本指南旨在幫助你盡可能快速而有效地學習angularjs。通過該指南你會學習到angularjs的一些基本特性，例如指令 表示式 過濾器 模組和控制...

AngularJS快速入門指南01 導言

angularjs使用新的attributes擴充套件了html angularjs對單頁面應用的支援非常好 spas angularjs非常容易學習 本指南旨在幫助你盡可能快速而有效地學習angularjs。通過該指南你會學習到angularjs的一些基本特性，例如指令 表示式 過濾器 模組和控制...