代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsSoccerFormCheck.rar
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <head> <title> New Document </title> <style> .username.ng-valid{ background-color:lightgreen; } .username.ng-invalid{ background-color:pink; } .userage.ng-valid{ background-color:lightgreen; } .userage.ng-invalid{ background-color:pink; } .usermail.ng-valid{ background-color:lightgreen; } .usermail.ng-invalid{ background-color:pink; } .userdate.ng-valid{ background-color:lightgreen; } .userdate.ng-invalid{ background-color:pink; } .usersn.ng-valid{ background-color:lightgreen; } .usersn.ng-invalid{ background-color:pink; } .userurl.ng-valid{ background-color:lightgreen; } .userurl.ng-invalid{ background-color:pink; } </style> <meta charset="gbk"> <script src="angular1.4.6.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> <form ng-submit="ctrl.submit()" name="myForm"> <table> <tr> <td width="50px">姓名:</td> <td> <input type="text" class="username" name="uname" ng-model="ctrl.user.name" required ng-minlength="4"/> </td> <td> <span ng-show="myForm.uname.$error.required">This a required field</span> <span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span> <span ng-show="myForm.uname.$invalid">This field is invalid</span> </td> </tr> <tr> <td width="50px">年龄:</td> <td> <input type="number" class="userage" name="uage" ng-model="ctrl.user.age" required ng-minlength="2"/> </td> <td> <span ng-show="myForm.uage.$error.required">This a required field</span> <span ng-show="myForm.uage.$error.minlength">Minimum length required is 2</span> <span ng-show="myForm.uage.$invalid">This field is invalid</span> </td> </tr> <tr> <td width="50px">邮件:</td> <td> <input type="email" class="usermail" name="umail" ng-model="ctrl.user.mail" required ng-minlength="3"/> </td> <td> <span ng-show="myForm.umail.$error.required">This a required field</span> <span ng-show="myForm.umail.$error.minlength">Minimum length required is 3</span> <span ng-show="myForm.umail.$invalid">This field is invalid</span> </td> </tr> <tr> <td width="50px">入职日期:</td> <td> <input type="date" class="userdate" name="udate" ng-model="ctrl.user.date" required ng-minlength="8"/> </td> <td> <span ng-show="myForm.udate.$error.required">This a required field</span> <span ng-show="myForm.udate.$error.minlength">Minimum length required is 8</span> <span ng-show="myForm.udate.$invalid">This field is invalid</span> </td> </tr> <tr> <td width="50px">SN:</td> <td> <input type="text" class="usersn" name="usn" ng-model="ctrl.user.sn" ng-pattern="/^SN-\d{4}$/"/> </td> <td> <span ng-show="myForm.udate.$invalid">This field is invalid</span> </td> </tr> <tr> <td width="50px">URL:</td> <td> <input type="url" class="userurl" name="uurl" ng-model="ctrl.user.url" /> </td> <td> <span ng-show="myForm.uurl.$invalid">This field is invalid</span> </td> </tr> <tr> <td ></td> <td colspan="2"><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td> <td> </tr> </table> </form> </body> </html> <script type="text/javascript"> <!-- angular.module('notesApp',[]) .controller('MainCtrl',[function(){ var self=this; self.submit=function(){ console.log("User name="+self.user.name+ " age="+self.user.age+ " mail="+self.user.mail+ " date="+self.user.date+ " sn="+self.user.sn+ " url="+self.user.url); alert("Form submitted."); }; }]); //--> </script>
效果：
要点：
目前我感觉AngularJS对复杂表单的验证不是那么方便，对浏览器的依耐性也强。常规验证的JS代码其实不复杂，AngularJS的优势在此并不明显。
本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7419018.html，如需转载请自行联系原作者
