AngularJS 输入验证

主宰稳场 提交于 2019-12-23 14:59:30

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 表单没有填写记录

 

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!