angular.js 验证码注册登录

css部分

    header{
        height: 50px;
        line-height: 50px;
        display: flex;
    }
    .callback{
        text-align: left;
        display: block;
        margin-left: 10px;
    }
    header span:nth-child(2){
        flex: 1
    }
    .content{
        background: black;
        height: 100%;
        overflow: hidden;
        padding: 0 20px;
    }
    .logo{
        margin: 33px 46px;
    }
    .logo img{
        width: 100%;
        height: 100%;
    }
    .content p{
        color: white;
        text-align: left;
        font-size: 13px;
    }
    .enjoy{
        color: #FF9900
    }
    .phoneNumber{
        display: flex;
        border-bottom: 1px solid white;
        padding: 5px 0px;
    }
    .phoneNumber input{
        border: none;
        background: black;
        color: white;
        font-size: 15px;
        width: 100%;
        outline:none;
        padding: 0;
        margin: 0
    }
    .phoneNumber button{
        background: black;
        width: 117px;
        height: 36px;
        border: 1px solid white;
        color: white;
        font-size: 13px;
        border-radius: 5px;
        outline:none;
    }
    .register{
        margin-top: 27px;
    }
    .Submission{
        height: 45px;
        width: 100%;
        margin-top: 40px;
        background-color: #EABC2E;
        border: none;
        outline:none;
        border-radius: 5px;
    }
    .introduce{
        margin: 54px 0;
        height: 154px;
        border: 1px solid #EABC2E;
        border-radius: 5px;
        padding-left: 11px;
    }
    .introduce ul li{
        text-align: left;
        color: white;
        line-height: 25px;
        font-size: 13px;
    }
    .introduce p{
        line-height: 40px;
    }
    .Copyright{
        height: 50px;
        background-color: black;
        color: white;
        margin: 0;
        font-size: 12px;
        text-align: center;
    }
    .errorFalse{
        position: fixed;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        display: none;
    }
    .errorFalse .link{
        position: absolute;
        top: 42%;
        width: 79%;
        left: 0;
        right: 0;
        height: 100px;
        margin: 0 auto;
        border-radius: 5px;
        border: 1px solid #EABC2E;
    }
    .errorFalse .link p{
        color: white;
        line-height: 0px;
        padding-top: 36px;
    }

页面部分

    <section>
    <div class="content">
        <div class="logo">
            <img src="images/logo.png" alt="" srcset="">
        </div>
        <p>{{Inviter_name}}邀请你注册X的现身</p>
        <p>注册成功后，你在「X的现身」APP中将
            <span class="enjoy">永久享受充值优惠权限！</span>
        </p>
        <form name="myForm" novalidate>
            <!-- 手机验证 -->
            <div class="register">
                <div class="phoneNumber">
                    <input type="number" placeholder="请输入您的手机号" ng-model="user.phone" name="phone" maxlength="11" required/>
                    <button ng-click="getCode()" ng-bind="description" ng-disabled="canClick">获取验证码</button>
                </div>
                <div class="phoneNumber">
                    <input type="text" value="" placeholder="请输入短信中的验证码" ng-model="user.code" required/>
                </div>
                <button class="Submission" ng-click="register()">下一步</button>
            </div>
        </form>
        <!-- 介绍 -->
        <div class="introduce">
            <p>「X的现身」APP 介绍：</p>
            <ul>
                <li>· 一款可以玩的狼人杀主题社交APP</li>
                <li>· 全新的狼人杀游戏体验，回归经典的面杀形式</li>
                <li>· 在这里可以发现更多有趣的人和事</li>
                <li>· 新一代陌生人之间的破冰神器</li>
            </ul>
        </div>
        <div class="Copyright">
            <p>Copyright © 2017-2018 北京咱们一起文化发展有限公司</p>
        </div>
    </div>
    <div class="errorFalse ">
        <div class="link">
            <p>该手机号已注册「X的现身」</p>
            <p>系统将自动为您跳转到下载页面</p>
        </div>
    </div>
</section>

js 部分

var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http, $interval, $location) {
    //初始化
    $scope.canClick = false;
    $scope.description = '获取验证码';
    $scope.second = 60;
    $scope.Inviter_name = $location.search().Inviter_name;
    $scope.user = {
        "phone": "",
        "code": ""
    }
    //验证手机号
    $scope.checkphone = function () {
        phone = $scope.user.phone;
        if (phone == '') {
            mui.toast('手机号码不能为空');
            return false;
        } else if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(phone))) {
            mui.toast('请填写正确的手机号');
            return false;
        }
        return true;
    }
    //验证验证码
    $scope.checkcode = function () {
        code = $scope.user.code;
        if (code == '') {
            mui.toast('验证码错误');
            return false;
        }
        return true;
    }
    //获取验证码
    $scope.getCode = function () {
        //验证手机号
        if (!$scope.checkphone()) {
            return false;
        }
        // 判断是canClick == true的时候说明获取验证码是点击后
        if ($scope.canClick == false) {
            $scope.url =
            phone = $scope.user.phone;
            $http({
                method: "GET",
                url: $scope.url,
                dataType: 'jsonp',
                params: {

                }
            }).success(function (data) {
                console.log(data)
                if (data.status = 22000) {
                    var timePromise = $interval(function () {
                        if ($scope.second <= 0) {
                            $interval.cancel(timePromise);
                            $scope.second = 60;
                            $scope.description = "重发验证码";
                            $scope.canClick = false;
                        } else {
                            $scope.second--;
                            $scope.description = $scope.second + "秒后重发";
                            $scope.canClick = true;
                        }
                    }, 1000);
                }
            })
        }
    }
    //提交信息
    $scope.register = function () {
        $scope.invite_code = $location.search().invite_code;
        if (!$scope.checkphone()) {
            return false;
        }
        if (!$scope.checkcode()) {
            return false;
        }
        $scope.url =
        $http({
            method: "GET",
            url: $scope.url,
            params: {

            }
        }).success(function (result) {
        });
    }
})

话不多说，直借粘贴代码用吧。 https://www.xappearance.com/m/ 这个我们的官网可以下载狼人杀的游戏。 代码不完美，请赐教。。