當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——校验（非form表单）
生活随笔
收集整理的這篇文章主要介紹了
深究AngularJS——校验（非form表单）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么是非form表單？因為基本上都是通$http服務異步發送與接收數據，沒有form表單個一樣可以。更何況，form表單的提交校驗在哪里都可以搜索得到，我這個是通過自己總結出來滴。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl">名字：<input ng-model="name"><span ng-if="checkData.nameCheck=='m'">不能為空</span><span ng-if="checkData.nameCheck=='e'">最少兩個字</span><br/>電話：<input ng-model="phone"><span ng-if="checkData.phoneCheck=='m'">手機號</span><span ng-if="checkData.phoneCheck=='e'">格式錯誤</span><br/><button ng-click="submit()">提交</button> </div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {//存校驗數據滴,給定默認值$scope.checkData ={"nameCheck":"m","phoneCheck":"m"};//提交時校驗數據:二選一$scope.submit = function(){ //1.這種會一個一個校驗的if($scope.checkName() && $scope.checkPhone()){alert("數據都符合，可以與后臺交互數據了")}//2.這種會一起校驗完的var nameFlag = $scope.checkName();var phoneFlag = $scope.checkPhone();if(nameFlag && phoneFlag){alert("數據都符合，可以與后臺交互數據了")}};//注：如果校驗的內容大同小異，可合并成一個校驗的方法，我就不寫了。//校驗名字$scope.checkName = function(){if($scope.name){if($scope.name.length<2){$scope.checkData.nameCheck = "e";return false;}else{//...進行某些正確的操作，如顯示正確圖片$scope.checkData.nameCheck = "r";return true;} }else{$scope.checkData.nameCheck = "m";return false;}};//校驗電話$scope.checkPhone = function(){var phone = $scope.phone;if(phone){var reg = /^1(3|4|5|6|7|8)\d{9}$/;//手機號正則if(reg.test(phone)){$scope.checkData.phoneCheck = "r";//正確}else{$scope.checkData.phoneCheck = "e";//格式錯誤}}else{$scope.checkData.phoneCheck = "m";return true;//可以為空}};}); </script> </body> </html>總結
以上是生活随笔為你收集整理的深究AngularJS——校验（非form表单）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深究AngularJS——ng-chec
- 下一篇： 深究AngularJS——$sce的使用