深究AngularJS——校验（非form表单）

来源：互联网发布：javascript 或运算编辑：程序博客网时间：2024/06/04 19:18

为什么是非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>

0 0