簡(jiǎn)單實(shí)現(xiàn)：用戶名、郵箱輸入 正確康二，login可點(diǎn)擊
輸入錯(cuò)誤，login不可點(diǎn)擊
用到的參數(shù)：
$dirty :臟數(shù)據(jù)
返回值：true/false
$pristine:空數(shù)據(jù)
沒(méi)有操作的時(shí)候，返回值也是真
$valid :合法數(shù)據(jù)
$invalid : 非法數(shù)據(jù)
$error: 錯(cuò)誤
用法：formName.inputName.參數(shù) =true/false
eg: login.username.$prinstine
三目運(yùn)算符：條件？語(yǔ)句A：語(yǔ)句B
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
<!-- 解決兼容問(wèn)題-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<script src="bootstrap/js/jquery-3.1.0.min.js"></script>
<!-- jquery在前邊靖诗，bootstrap依賴jQuery-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="icon" href="favicon.icon">
<title></title>
</head>
<body class="container">
<header class="page-header">
<h1 class="text-capitalize">form表單通過(guò)AngularJS異步驗(yàn)證練習(xí)</h1>
</header>
<div >
<form action="" class="form-horizontal"
ng-app="myApp"
ng-controller="form2Ctrl"
name="login">
<div class="form-group has-feedback"
data-ng-class="login.username.$pristine?'':(login.username.$valid?'has-success':'has-error')">
<!-- username是空數(shù)據(jù)郭怪？ 執(zhí)行 空 or 語(yǔ)句B
語(yǔ)句B： username是合法數(shù)據(jù)？ 執(zhí)行 成功 or 錯(cuò)誤
-->
<label class="control-label" for="username">username:</label>
<input type="text" class="form-control " id="username" name="username" required ng-model="username">
<span class="glyphicon form-control-feedback"
data-ng-class="'glyphicon-ok'"
ng-show="!login.username.$pristine&&login.username.$dirty&&login.username.$valid"></span>
<!-- 非空刊橘，臟數(shù)據(jù)鄙才，合法-->
<span class="glyphicon form-control-feedback"
data-ng-class="'glyphicon-remove'"
ng-show="!login.username.$pristine&&login.username.$dirty&&login.username.$invalid" ></span>
<!-- 非空，臟數(shù)據(jù)促绵，不合法-->
</div>
<div class="form-group has-feedback"
data-ng-class="login.email.$pristine?'':(login.email.$valid?'has-success':'has-error')">
<!-- email是空數(shù)據(jù)攒庵？ 執(zhí)行 空 or 語(yǔ)句B
語(yǔ)句B： email是合法數(shù)據(jù)？ 執(zhí)行 成功 or 錯(cuò)誤
-->
<label class="control-label" for="email">email:</label>
<input type="email" class="form-control " id="email" name="email" required ng-model="email">
<span class="glyphicon form-control-feedback"
data-ng-class="'glyphicon-ok'"
ng-show="!login.email.$pristine&&login.email.$dirty&&login.email.$valid"></span>
<!-- 非空败晴，臟數(shù)據(jù)浓冒，合法-->
<span class="glyphicon form-control-feedback"
data-ng-class="'glyphicon-remove'"
ng-show="!login.email.$pristine&&login.email.$dirty&&login.email.$invalid" ></span>
</div>
<p class="pull-right">
<button type="button" class="btn btn-primary" data-ng-disabled="!login$valid">login</button>
<!-- 不合法-->
</p>
</form>
</div>
<script>
var app= angular.module('myApp',[]);
app.controller('form2Ctrl',function($scope){
})
</script>
</body>
</html>
