脚本页面如下:
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script type="text/javascript" src="./js/lib/angular/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
{{mainCtrl.formobj}}
<form name="myform">
<p>
姓名:<input type="text" required ng-model="mainCtrl.formobj.name"/>
</p>
</form>
<script type="text/javascript">
var myapp = angular.module("myapp", []);
myapp.controller("MainCtrl", [function (){
this.formobj = {};
}]);
</script>
</body>
</html>
上图为页面刚刚打开是的状态;
下面样式分别为表单form与输入框input在“页面启动”,“输入数据”,“清空数据”三个步骤的angular验证样式显示对比:
表单form:
页面启动 class="ng-pristine ng-invalid ng-invalid-required"
输入数据 class="ng-dirty ng-valid-parse ng-valid ng-valid-required"
清空数据 class="ng-dirty ng-valid-parse ng-invalid ng-invalid-required"
输入框input
页面启动 class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required"
输入数据 class="ng-dirty ng-touched ng-not-empty ng-valid-parse ng-valid ng-valid-required "
清空数据 class="ng-dirty ng-touched ng-empty ng-valid-parse ng-invalid ng-invalid-required"