AngularJS 输入验证
1、AngularJS表单和控件可以验证输入的数据，对用户输入的非法数据进行警告。
2、客户的验证不能确保用户输入数据的安全，服务器的验证也是必须的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container"style="padding:50px">
<form data-ng-app="myApp"data-ng-controller="myCtrl" name="myForm" novalidate>
<p>用户名：<input type="text"data-ng-model="user"name="user" required /><span style="color:red"data-ng-show="myForm.user.$dirty&&myForm.user.$invalid"><span data-ng-show="myForm.user.$error.required">用户名是必须的。</span></span></p>
<p>邮 箱：<input type="email"data-ng-model="email"name="email" required /><span style="color:red"data-ng-show="myForm.email.$dirty&&myForm.email.$invalid"><span data-ng-show="myForm.email.$error.required">邮箱地址是必须的。</span><span data-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>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope) { $scope.user = "John doe";$scope.email="Johndoe@qq.com" })
</script>
</body>
</html>
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
| 属性 | 描述 |
|---|---|
| $dirty | 表单有填写记录 |
| $valid | 字段内容合法的 |
| $invalid | 字段内容是非法的 |
| $pristine | 表单没有填写记录 |
