<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.error{
background-color: red;
color: #FFF;
transition:all linear 0.5s;
}
.my-form.ng-invalid{
background-color: red;
}
.my-form{
transition: all linear 0.5s;
}
</style>
</head>
<body>
<form name="myForm" class="my-form" ng-controller="ExampleController">
<label>userName: <input type="text" name="userName" ng-model="user.name" required="required" ng-minLength="10" ng-maxLength="20"/></label>
<p class="error" ng-show="!myForm.userName.$valid">校验没有通过，大*</p>
<p class="error" ng-show="myForm.userName.$error.required">这个是必填项，大*</p>
<p>user:{{user.name}}</p>
<p>{{myForm.userName.$valid}}</p>
<p>{{myForm.userName.$error}}</p>
<p>{{myForm.userName.$dirty}}</p>
<p>empty: {{myForm.userName.$empty}}</p>
<p ng-show="myForm.userName.$error.minlength">太短了</p>
<p ng-show="myForm.userName.$error.maxlength">太长了</p>
<br /><br /><br />
<p>{{myForm.$error.required}}</p>
<p>{{myForm.$error.minlength}}</p>
<p>{{myForm.$error.maxlength}}</p>
</form>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module('app' , []);
app.controller('ExampleController' , ['$scope' , function($scope){ }]);
</script>
</body>
</html>