angularJS表单验证
程序员文章站
2022-03-08 20:34:22
...
最近因为毕设和工作原因需要学习angularJS技术，这里就记录一下自己学习angularJS表单验证的一些收获。
一份简单的代码如下：
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>ch01_06</title>
<script type="text/javascript" src="../../angular-1.7.8/angular.js"></script>
</head>
<body>
<div>
<form name="user">
<div>
<label>Email：</label>
<input type="email"
name = "email1"
ng-minlength="10"
ng-maxlength="20"
ng-model="user.email"
required>
<span ng-show="user.email1.$error.required">内容不能为空</span>
<span ng-show="user.email1.$error.minlength">长度不能小于10</span>
<span ng-show="user.email1.$error.maxlength">长度不能大于20</span>
</div>
</form>
</div>
</body>
</html>ng-model只能用于表单元素上面，用于建立数据绑定。
name 属性规定 input 元素的名称。
ng-model对应的字符串，这里是"user.email"，其实就是在模型中构建一个user.email数据，并实现数据绑定。
当我输入框中的数据发生变化时，模型中的数据也会发生变化，在rootScope中触发一次digest循环，并自动更新视图，从而会校验该表单中数据的正确性
上一篇： Android之父一辈子最爱的还是机器人
下一篇： 机器人做错事道歉卖萌，人类竟毫无抵抗力？