AngularJS 输入验证
2015-12-25 15:45
573 查看
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>
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
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 | 表单没有填写记录 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angular2快速开始
- angular2快速开始
- AngularJS 表单
- angularjs 从外部改变controller内的数据
- AngularJS入门总结
- angularjs 过滤多组数据
- angularJS 提示
- angular学习日志06 form表单 ng-submit
- AngularJS进阶(二十二)实现时间选择插件
- AngularJS进阶(二十二)实现时间选择插件
- 谨记初学者必须掌握的AngularJS技术要点清单
- angularjs ng-repeat
- angular 之 module
- angular 之 model 的 decorator
- AngularJS 模块
- angularjs中指令的scope
- Angular中创建服务的三种方式factory、service、provider
- angularJS seed 安装
- angularjs
- angular学习日志05 显示文本 ng-bind