欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS 輸入驗(yàn)證詳解及實(shí)例代碼

 更新時間：2016年07月28日 10:25:12   投稿：lqh  
本文主要介紹AngularJS 輸入驗(yàn)證,這里對AngularJS 輸入驗(yàn)證的資料做了整理,并附簡單實(shí)例代碼和效果圖,有需要的小伙伴參考下

AngularJS 輸入驗(yàn)證

AngularJS 表單和控件可以驗(yàn)證輸入的數(shù)據(jù)。

輸入驗(yàn)證

在前面的幾個章節(jié)中，你已經(jīng)學(xué)到關(guān)于 AngularJS 表單和控件的知識。

AngularJS 表單和控件可以提供驗(yàn)證功能，并對用戶輸入的非法數(shù)據(jù)進(jìn)行警告。

注意： 客戶端的驗(yàn)證不能確保用戶輸入數(shù)據(jù)的安全，所以服務(wù)端的數(shù)據(jù)驗(yàn)證也是必須的。

應(yīng)用代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<h2>驗(yàn)證實(shí)例</h2>

<form ng-app="myApp" 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>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
 $scope.user = 'John Doe';
 $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

運(yùn)行結(jié)果：

 驗(yàn)證實(shí)例

用戶名:

郵箱:

注意： HTML 表單屬性 novalidate 用于禁用瀏覽器默認(rèn)的驗(yàn)證。

實(shí)例解析

AngularJS ng-model 指令用于綁定輸入元素到模型中。

模型對象有兩個屬性： user 和 email。

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

 

屬性 描述
$dirty 表單有填寫記錄
$valid 字段內(nèi)容合法的
$invalid 字段內(nèi)容是非法的
$pristine 表單沒有填寫記錄

 以上就是對AngularJS 輸入驗(yàn)證的資料整理，后續(xù)繼續(xù)補(bǔ)充，希望能幫助學(xué)習(xí)的同學(xué)。

相關(guān)文章

最新評論