<!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>