Angular中登录时验证手机号、点击发送验证码实现

先上一段，页面的html代码：

<!--html-->
<!-- 添加页面登陆功能，登陆后才可抽奖 -->
        <div class="login" ng-if="showLogin">
            <div class="login-content">
                <div class="login-title">
                    <p class="welcomeLogin">欢迎登录</p>
                </div>
                <div class="login-body">
                    <div class="body-wrapper">
                    <div class="login-phone">
                        <span>手机号:</span>
                        <input type="text" name="phone" value="" ng-model="$parent.mobile" ng-blur="mobileCheck()">
                    </div>
                    <hr/>
                    <div class="login-verification">
                        <span>验证码:</span>
                        <input type="text" name="verification" value="">
                        <a ng-click="sendCode()" ng-bind="paracont" ng-disabled="paraevent"></a>
                    </div>
                    </div>
                    <p ng-if="mobileErr">请输入格式正确的手机号码</p>
                        <button class="login-bnt">登录</button>
                    <div class="begin" ng-click="closeLogin()">
                        <span>开始抽奖 >></span>
                    </div>
                </div>
                <div class="login-footer">
        
                </div>
            </div>
        </div>

踩坑实记：ng-if会创建一个子scope作用域，会继承父级作用域的属性。对于值类型的变量来说，如果修改了ng-if中的变量的值，父scope中的值是不会修改的。这里我们用ng-model绑定input输入框的内容。必须加上$parent才可以绑定到父级scope的作用域上。 

1. 验证手机号是否合法 

var app = angular.module("app",[])
app.controller("luckCtrl", function($scope, $http, $interval){
$scope.mobileErr = false; //设置默认的验证状态为正确
$scope.mobileCheck = function(){
        var mobile = $scope.mobile + '';//强制转换为字符串
        if(mobile.length == 0 || mobile.length != 11){
            $scope.mobileErr = true;
            return false;//将登录状态设置为false
        }//长度验证

        var checkRegex = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,2,3,5-9])|19[0-9])\d{8}$/;
        if(!checkRegex.test(mobile)){//正则表达式合法性验证
            $scope.mobileErr = true;
            return false
        }
        $scope.mobileErr = false;
    }
}

    2.发送验证码

 

var app = angular.module("app",[])
app.controller("luckCtrl", function($scope, $http, $interval){
     $scope.paracont = "发送验证";//发送验证时的默认文本
     $scope.paraevent = true;//发送验证可否点击
     var second = null;
     var timePromise = undefined;

    $scope.sendCode  = function(){
        var mobile = $scope.mobile
        if(second === null){
            second = 60;//初始化发送间隔为60s
            $scope.mobiletest = "";
            timePromise = $interval(
                function(){
                    if(second<=0){
                        $interval.cancel(timePromise)//超时则取消间隔定时器
                        timePromise = undefined;
                        second = null;
                        $scope.paracont = "重新获取";//重置状态
                        $scope.paraevent = true//可点击重新获取
                    }else{
                        $scope.paracont = second + "s"
                        second--;//计时中国
                    }
                },1000,100)
        }else{
            return false;
        }   
    }
}