一、执行基本的表单验证
<!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="" type="text/javascript" charset="utf-8"></script> <link type="text/css" href="" /> <link type="text/css" href="" /> <script type="text/javascript"> angular.module('exampleApp',[]) .controller('defaultCtrl',function($scope){ $scope.addUser=function(userDetails){ $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")" } $scope.message='Ready'; }); </script> </head> <body> <div ng-controller='defaultCtrl'> <form novalidate ng-submit='addUser(newUser)'> <div> <div> <label for="">Name:</label> <input type="text" required ng-model='newUser.name'/> </div> <div> <label for="">Email:</label> <input type="email" required ng-model='newUser.email'/> </div> <div> <label for=""> <input type="checkbox" ng-model='newUser.agreed' required /> I agree to the terms and conditions </label> </div> <button type="submit" ng-disabled='myForm.$invalid'>OK</button> </div> <div> message:{{message}} <div> valid:{{myForm.$valid}} </div> </div> </form> </div> </body> </html>
在上述例子中，该HTML文档被浏览器加载时的初始状态是：有三个input元素以及一个被禁用且无法单击的ok按钮，当在文本框中输入值并且勾选了复选框之后，按钮将变为可用，从而允许用户提交表单。
1、增加表单元素
（1）首先需要在form上设置一个name属性
（2）需要给表单增添novalidate属性，该属性用于告诉浏览器不要自己校验表单，从而允许AngularJS不受干扰的工作
（3）ng-submit指令为表单提交事件指定一个自定义的响应行为，将在用户提交表单时触发
2、使用校验属性
（1）为各个想要验证的元素添加name属性，这样可以访问到Angularjs所提供的各种特殊的变量
（2）设置type属性，这个属性指定了input元素将要接收的数据类型，这些类型告诉angularjs需要什么样的校验
（3）指定required属性，这个属性指定用户必须为待校验的表单提供一个输入值
（4）在本例中input元素都使用ng-model指令来设置隐式定义的newUser对象的一个属性
3、监控表单的有效性
AngularJS中用来替换标准表单元素的指令定义了一些特殊的变量，可以用来检查表单中各个元素或整个表单的有效性状态。
$pristine：如果用户没有与元素/表单产生交互，则返回true
$dirty：如果用户与元素/表单产生过交互，则返回true
$valid：当元素/表单内容的校验结果为有效时则返回true
$invalid：当元素/表单内容的校验结果为无效时则返回true
$error：提供校验错误的详情信息
二、提供表单校验反馈信息
在上面的例子中展示的效果是比较简单的，ok按钮将一直被禁用，直到所有的input元素可用，以阻止用户输入错误格式的或未填完的数据。在接下来我们将演示AngularJS为报告实时的校验信息
1、使用css提供校验反馈信息
ng-pristine：用户未曾交互过的元素被添加到这个类
ng-dirty：用户曾经交互过的元素被添加到这个类
ng-valid：校验结果为有效的元素在这个类中
ng-invalid：校验结果为无效的元素在这个类中
下面我们来看具体用法：
<!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="" type="text/javascript" charset="utf-8"></script> <link type="text/css" href="" /> <link type="text/css" href="" /> <script type="text/javascript"> angular.module('exampleApp',[]) .controller('defaultCtrl',function($scope){ $scope.addUser=function(userDetails){ $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")" } $scope.message='Ready'; }); </script> <style type="text/css"> form .ng-invalid.ng-dirty{background-color: lightpink;} form .ng-valid.ng-dirty{background-color: lightgreen;} span.summary.ng-invalid{color: red;font-weight: bold;} span.summary.ng-valid{color: green;} </style> </head> <body> <div ng-controller='defaultCtrl'> <form novalidate ng-submit='addUser(newUser)'> <div> <div> <label for="">Name:</label> <input type="text" required ng-model='newUser.name'/> </div> <div> <label for="">Email:</label> <input type="email" required ng-model='newUser.email'/> </div> <div> <label for=""> <input type="checkbox" ng-model='newUser.agreed' required /> I agree to the terms and conditions </label> </div> <button type="submit" ng-disabled='myForm.$invalid'>OK</button> </div> <div> message:{{message}} <div> valid: <span ng-class="myForm.$valid?'ng-valid':'ng-invalid'"> {{myForm.$valid}} </span> </div> </div> </form> </div> </body> </html>