版权声明:本文为博主原创文章,未经博主允许不得转载。【合作联系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 笔记(四) 服务