用户登录注册页面

一、目标：在公众号网页里制作一个app的分享链接（该app已经可以微信授权登录），供用户下载app。

二、要求：用户点击链接的时候如果没有微信授权过，则提示授权获取用户的微信信息。用户同意授权后，获取用户信息，查询该用户信息里是否绑定过手机号（手机号字段是否为空）。

一、绑定过：则跳转到下载页面c，点击下载就直接开始下载app；

二、未绑定：则跳转到注册页面b，用户输入手机号，然后实时监测用户的输入，当输入11位数字后，ajax请求服务器获取数据库用户列表里的所有手机号，检测手机号是否已经注册。手机号不满11位或者没有同意协议，提交按钮都置灰不可点击

1、没有注册过：弹出姓名，身份证，密码，验证码输入框给用户填写，填写完毕之后提交，保存到数据库后跳转到下载页面c；
2、注册过（数据库有该手机号）：直接跳转到下载页面c。

三、以下代码为b页面代码，通过该页面掌握以下知识点：

1、jquery实时监测input框的输入；

$("#mobile").bind('input propertychange',function () {};

2、手机号的正则验证（/^1[3|4|5|7|8]\d{9}$/）；

3、submit满则条件时可以点击提交，否则变灰不可点击（用disabled属性）；

4、判断checkbox是否选中，例如协议是否同意；

$("input[type='checkbox']").is(':checked') ;

5、提交前验证input框是否有空（用如下js里的checkNull()方法）；

6、ajax表单提交，这样可以有返回信息(form表单提交没有)，方便提醒用户：

$.ajax({
    type: "POST",//方法类型
    dataType: "json",//预期服务器返回的数据类型
    url: "downloadapp" ,//url
    data: $('#form1').serialize(),
    success: function (result) {
        if (result.status == '1') {
            window.location.href = "downapp"; //页面跳转
        }else{
            var prompt = result.msg;
            promptf(prompt); //执行方法
        }
    }
});

7、发送验证码后显示倒计时，倒计时期间不可再发送。

一、需要引入layui.js和jquery.js文件

<script src="layui/layui.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>

二、css内容如下

<style>
html{width: 100%;font-size: 1.5rem;background-color: white;}
a{text-decoration: none;}
.content{width: 90%;margin:0 5%;}
.logo{width: 100%;height: 10rem;}
.logo .imgleft{float: left;width: 50%;text-align: center;height:100%;}
.logo .imgright{float: right;width: 50%;height: 100%;}
.logo .imgright img{float: right;height: 28%;margin-top: 18%;}
.huanyin{width: 100%;height: 10rem;}
.huanyin .span1{font-size:4rem;line-height: 5rem;}
.huanyin .span2{font-size:1.6rem;line-height: 5rem;}
.inputtext{margin-top: 5%;}
.inputtext input{border:none;font-size: 2rem;line-height: 3rem;background-color: white;}
.inputtext hr{margin-bottom: 6%;}
.inputtext button{font-size: 1.7rem;width: 40%;float: right;background-color: white;color: #FFBB66;border-radius: 2rem;border: 1px solid red;}
.inputcood{width: 58%;}
.yinc{display: none;}
.yinc p{color: gray;font-size: 1.2rem;}
.xieyi{font-size:1.5rem;line-height: 2.5rem;}
.xieyi input{zoom:250%;}
.xieyi a{color: #3f88bf;}
#download{font-size: 2.2rem;height: 4rem;width: 68%;margin-left: 16%;border-radius: 60px;color: white;background-color: gray;border: none;}
.prompt{width: 90%;text-align: center;position: absolute;display: none;}
.prompt input{width: auto;height: 3rem;color: #082c3e;background-color: #bbc1bf;font-size: 1.5rem;text-align: center;border-radius: 40px;border: none;}
</style>

三、html页面结构如下

<div class="content">
    <div class="logo">
        <div class="imgleft">
            <img src="">
        </div>
        <div class="imgright">
            <a href="" onClick="javascript :history.back(-1);">
                <img src="">
            </a>
        </div>
    </div>

    <div class="huanyin">
        <span class="span1">欢迎你</span><br>
        <span class="span2">共创价值、共享未来、共生未来！</span>
    </div>

    <form action="##" method="post" id="form1" onsubmit="return false">
        <div class="inputtext">
            <input type="text" name="phone" placeholder="手机号" id="mobile" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"><hr>
            <div class="yinc">
                <input type="hidden" name="spid" value="{$spid}">
                <input type="text" name="name" placeholder="姓名" id="name"><hr>
                <input type="text" name="idcard" placeholder="身份证号" oninput="value=value.replace(/[^\d]/g,'')" maxlength="18" id="idcard"><hr>
                <input type="text" name="passwd" placeholder="登录密码" minlength="4" maxlength="12" id="passwd"><hr>
                <p>密码必须大于等于4位，只能使用字母，数字及标点符号</p>
                <input type="text" name="code" placeholder="短信验证码" oninput="value=value.replace(/[^\d]/g,'')" class="inputcood" id="code" maxlength="5">
                <button type="submit" id="getCode">获取验证码</button>
                <hr>
            </div>
        </div>
        <input type="submit" id="download" disabled="disabled" value="开启商城之旅" onclick="return checkNull()" >
    </form>

    <div class="xieyi">
        <input type="checkbox" id="isdown">阅读并同意<a href="">《用户服务协议》</a>和<a href="">《隐私政策》</a>
    </div>

    <div class="prompt" id="prompt">
        <input type="test" id="promptvalue" value="验证码错误">
    </div>
</div>

四、页面的js内容

<script type="text/javascript">
    isdowns = 0;
    // 对手机号码输入的实时监测
    $("#mobile").bind('input propertychange',function () { 
        var mobile=$(this).val();
        if(mobile.length=='11'){
            var mobileReg = /^1[3|4|5|7|8]\d{9}$/; //手机号正则
            var phoneflag = mobileReg.test(mobile);
            if (!phoneflag) {
                isdowns = 0;
                alert('手机号码格式不正确！');
                $(".yinc").css("display","none");
            } else {
                $.ajax({
                    url:"/wap/index/getmobile",
                    data:{mobile:mobile},
                    type: "POST",
                    dataType:"json",
                    success: function(data){
                        if (data) { 
                            window.location.href = "downapp";
                        }else{
                            isdowns = 1;
                            $(".yinc").css("display","block");
                            isdownload();
                        }
                    }
                });
            }
        }else{
            isdowns = 0;
            $(".yinc").css("display","none");
            $("#download").css("background-color","gray");
            $('#download').attr("disabled",true);
        }
    });

    function isdownload(){
        if ($("input[type='checkbox']").is(':checked')) {
            $("#download").css("background-color","#FFBB66");
            $('#download').attr("disabled",false);
        }   
    }

    $("#isdown").click(function(){
        if ($("input[type='checkbox']").is(':checked')&&isdowns=='1') {
            $("#download").css("background-color","#FFBB66");
            $('#download').attr("disabled",false);
        }else{
            $("#download").css("background-color","gray");
            $('#download').attr("disabled",true);
        }
    });

    function checkNull(){
        var num=0;
        var str="";
        $("input[type$='text']").each(function(n){
            if($(this).val()==""){
                num++;
                str+=$(this).attr("placeholder")+"不能为空！\r\n";
            }
        });
        if(num>0){
            alert(str);
            return false;
        }else{
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "downloadapp" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    if (result.status == '1') {
                        window.location.href = "downapp";
                    }else{
                        var prompt = result.msg;
                        promptf(prompt);
                    }
                }
            });
        }
    }

    function promptf(prompt){
        $("#promptvalue").attr("value",prompt);
        $("#prompt").css("display","block");
        setTimeout(function(){
            $("#prompt").css("display","none");
        },2000);
    }

    // 发送验证码触发事件
    $('#getCode').click(function() {
        sendyzm($("#getCode"));
    });

    function sendyzm(obj){
        var mobile = $('#mobile').val();//手机号码的值
        $.ajax({
            url:"/wap/index/get_sms_code",
            data:{mobile:mobile},
            type: "POST",
            async : false, // 同步
            success: function(data){
                alert("验证码发送成功");
            },
            error:function(){
                alert("验证码发送失败");
            }
        });
        setTime(obj);//开始倒计时
    }

    // 倒计时处理
    var countdown = 60;
    function setTime(obj) {
        if (countdown == 0) {
            obj.prop('disabled', false);
            obj.text("获取验证码");
            countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            obj.prop('disabled', true);
            obj.text("("+countdown+"s)后重新发送") ;
            countdown--;
        }
        setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
    }
</script>