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

最新推荐文章于 2024-08-24 09:00:59 发布

bug师姐

最新推荐文章于 2024-08-24 09:00:59 发布

阅读量4.6k

点赞数 1

分类专栏： AngularJS angularJS应用详解文章标签： angularjs 表单校验

本文链接：https://blog.csdn.net/zcl_love_wx/article/details/51394784

版权

AngularJS 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

angularJS应用详解

14 篇文章 23 订阅

订阅专栏

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