在上述例子中，我们定义了四个样式，头两个样式用于选择属于ng-dirty类成员的元素，仅在用户与之交互后应用到相应元素上。内容有效的元素是ng-valid类的成员，会被渲染为淡绿色背景，内容无效的元素是ng-invalid类的成员，会被渲染为淡粉色背景
2、使用特殊变量来提供反馈信息
<!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-required.ng-dirty{background-color: lightpink;} form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;} form .ng-valid.ng-dirty{background-color: lightgreen;} span.summary.ng-invalid{color: red;font-weight: bold;} span.summary.ng-valid{color: green;} div.error{color:red;font-weight: bold;} </style> </head> <body> <div ng-controller='defaultCtrl'> <form novalidate ng-submit='addUser(newUser)'> <div> <div> <label for="">Email:</label> <input type="email" required ng-model='newUser.email'/> <div ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty"> <span ng-show="myForm.userEmail.$error.email"> please enter a valid email address </span> <span ng-show="myForm.userEmail.$error.required"> please enter a value </span> </div> </div> <button type="submit" ng-disabled='myForm.$invalid'>OK</button> </div> </form> </div> </body> </html>
在本例中新增了一个新的div元素用于给用户显示校验提示信息，新的div元素的可见性是受ng-show指令控制的，将会在input元素被输入值，且输入值未通过校验时显示该元素。这里是联合使用form元素的name值和input的name值来访问input元素的。在这个例子中，我们使用特殊校验变量和其他指令联合使用以增强用户体验。但是这样可能会使页面增加大量的相同冗余信息的元素，接下来我们做简化
<!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'; $scope.getError=function(error){ if(angular.isDefined(error)){ if(error.required){ return 'please enter a value'; }else if(error.email){ return 'please enter a valid email address'; } } } }); </script> <style type="text/css"> form .ng-invalid-required.ng-dirty{background-color: lightpink;} form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;} form .ng-valid.ng-dirty{background-color: lightgreen;} span.summary.ng-invalid{color: red;font-weight: bold;} span.summary.ng-valid{color: green;} div.error{color:red;font-weight: bold;} </style> </head> <body> <div ng-controller='defaultCtrl'> <form novalidate ng-submit='addUser(newUser)'> <div> <div> <label for="">Email:</label> <input type="email" required ng-model='newUser.email'/> <div ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty"> {{getError(myForm.userEmail.$error)}} </div> </div> <button type="submit" ng-disabled='myForm.$invalid'>OK</button> </div> </form> </div> </body> </html>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》