版权声明：本文为博主原创文章，未经博主允许不得转载。【合作联系QQ1668681286】 https://blog.csdn.net/qq_33036361/article/details/82052896
表单验证
1.常用表单控件
- input : text 文本 / number 数字 / email 邮箱 / rang 范围（数字，max 最大值，min最小值 ，step 步长）/ color 颜色选择 / 日期时间选择类（date, month, week, time, datetime, datetime-local） / file 文件选择
- select: 下拉列表
- textarea: 文本区域
2.表单验证
表单控件状态(调用：表单名.控件名.状态 ，如: myform.email.$valid )
| 状态 | 说明 |
|---|---|
| $dirty | 有填写记录 |
| $valid | 验证通过 |
| $invalid | 验证不通过 |
| $pristine | 没有填写记录 |
注：1.错误信息输出，配合ng-show / ng-hide 使用
2.控件须进行数据绑定(ng-model) 其状态才能随输入发生变化
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<script src="angular.js" charset="utf-8"></script>
<script>
let app=angular.module('myApp',[]);
app.controller('main',function($scope){
$scope.color="#ff0000";
});
</script>
</head>
<body ng-controller='main'>
<form name="myform">
email<input type="email" name="email" ng-model="email2" required/><span ng-show="myform.email.$error.required">*必填</span> <span ng-show="myform.email.$invalid&&myform.email.$dirty">*邮箱无效</span> <br>
url<input type="url" name='url' ng-model="url2" required/><span ng-show="myform.url.$error.required">*必填</span> <span ng-show="myform.url.$invalid&&myform.url.$dirty">*URL无效</span><br>
number<input type="number" name='num' ng-model="num2" required/><span ng-show="myform.num.$error.required">*必填</span> <br>
range<input type="range" max="9" min="1" /><br>
Date pickers (date, month, week, time, datetime, datetime-local)<br>
datetime<input type="date" /><br>
search<input type="search" /><br>
color<input type="color" ng-model="color" /> {{color}}<br>
</form>
</body>
</html>上一篇 angular 笔记（四） 服务