简单实现：用户名、邮箱输入 正确，login可点击
输入错误，login不可点击
用到的参数：
$dirty :脏数据
返回值：true/false
$pristine:空数据
没有操作的时候，返回值也是真
$valid :合法数据
$invalid : 非法数据
$error: 错误
用法：formName.inputName.参数 =true/false
eg: login.username.$prinstine
三目运算符：条件？语句A：语句B
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
<!-- 解决兼容问题-->
<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表单通过AngularJS异步验证练习</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是空数据？ 执行 空 or 语句B
语句B： username是合法数据？ 执行 成功 or 错误
-->
<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>
<!-- 非空，脏数据，合法-->
<span class="glyphicon form-control-feedback"
data-ng-class="'glyphicon-remove'"
ng-show="!login.username.$pristine&&login.username.$dirty&&login.username.$invalid" ></span>
<!-- 非空，脏数据，不合法-->
</div>
<div class="form-group has-feedback"
data-ng-class="login.email.$pristine?'':(login.email.$valid?'has-success':'has-error')">
<!-- email是空数据？ 执行 空 or 语句B
语句B： email是合法数据？ 执行 成功 or 错误
-->
<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>
<!-- 非空，脏数据，合法-->
<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>
网友评论