AngularJS 輸入驗證

angularjs 表單和控制項可以驗證輸入的資料。

在前面的幾個章節中，你已經學到關於 angularjs 表單和控制項的知識。

angularjs 表單和控制項可以提供驗證功能，並對使用者輸入的非法資料進行警告。

客戶端的驗證不能確保使用者輸入資料的安全，所以服務端的資料驗證也是必須的。

<

!doctype

html

>

<

html

>

<

script

src=

"">

<

/script

>

<

body

>

<

h2>validation example

<

/h2>

<

form 

ng-controller=

"validatectrl"

name=

"myform"

novalidate

>

<

p>使用者名稱:

<

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"

>使用者名稱是必須的。

<

/span

>

<

/span

>

<

/p>

<

p <

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"

>郵箱是必須的。

<

/span

>

<

span

ng-show=

"myform.email.$error.email"

>非法的郵箱。

<

/span

>

<

/span

>

<

/p>

<

p>

<

input

type=

"submit"

ng-disabled=

"myform.user.$dirty && myform.user.$invalid ||

myform.email.$dirty && myform.email.$invalid"

>

<

/p>

<

/form

>

<

script

>

$scope.user = 'john doe';

$scope.email = '[email protected]';

});<

/script

>

<

/body

>

<

/html

>

嘗試一下 »

html 表單屬性 novalidate 用於禁用瀏覽器預設的驗證。

angularjs ng-model 指令用於繫結輸入元素到模型中。

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

我們使用了 ng-show指令， color:red 在郵件是 $dirty 或 $invalid 才顯示。

屬性描述

$dirty

表單有填寫記錄

$valid

字段內容合法的

$invalid

字段內容是非法的

$pristine

表單沒有填寫記錄

AngularJS 輸入驗證

angularjs 表單和控制項可以驗證輸入的資料。在前面的幾個章節中，你已經學到關於 angularjs 表單和控制項的知識。angularjs 表單和控制項可以提供驗證功能，並對使用者輸入的非法資料進行警告。客戶端的驗證不能確保使用者輸入資料的安全，所以服務端的資料驗證也是必須的。doctype...

AngularJS 輸入驗證

html 表單屬性novalidate用於禁用瀏覽器預設的驗證。非法的郵箱位址。angularjsng model指令用於繫結輸入元素到模型中。模型物件有兩個屬性 user和email。我們使用了ng show指令，color red 在郵件是 dirty或 invalid才顯示。屬性描述 dirt...

AngularJS（五） 表單及輸入驗證

表單基礎 表單是html中很重要的乙個部分，基本上我們的資訊錄入都依靠表單，接下來我們學習如何在angularjs中使用表單，首先看以下示例 示例 angularjs 13.html 分析以上 我們新增了乙個表單，在表單中增加了ng submit指令，這樣我們就無需在提交按鈕中新增ng click了...