當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS的稍复杂form验证
生活随笔
收集整理的這篇文章主要介紹了
AngularJS的稍复杂form验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼下載：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，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的AngularJS的稍复杂form验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 输出控制台传递的参数——小小实例。
- 下一篇： 9.4