JS手机号注册及验证码校验

巴沟旮旯儿
805 阅读2分钟

需要绑定手机号 和 验证码 接口

代码部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="./css/myReset.css" />
  <script src="./js/viewport.js"></script>
  <script src="./js/jquery-2.1.4.min.js"></script>

  <title>绑定手机号</title>
  <style>
    #app {
      width: 100%;
      margin: auto;
      overflow: hidden;
    }

    /* 导航头 */
    .back {
      width: 0.2rem;
    }

    .navigation {
      z-index: 10;
      position: fixed;
      top: 0;
      right: 0;
      background: #fff;
      width: 100%;
      height: 0.7rem;
      border-bottom: 1px solid #c9bfbf;
      display: flex;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
    }

    .navigation div {
      padding: 0 0.2rem 0;
      font-size: 0.3rem;
    }

    .mainBox_hasNav {
      /* margin-top: 0.7rem;*/
      width: 100%;
      height: 13.34rem;
      background: url('$!{Const.getCdn()}/img/weixinChat/phoneBg.png') no-repeat center;
      background-size: 100% 100%;
      position: relative;
    }

    .payWay {
      border-radius: 10px;
      width: 6.5rem;
      padding: 0.3rem 0;
      background-color: #fafafa;
      position: absolute;
      top: 47%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
    }

    .payWay li {
      font-size: 14px;
      margin: 0 0.2rem;
      vertical-align: middle;
      text-align: left;
    }

    .payWay li:first-child {
      border-bottom: 1px solid #eee;
    }

    .payWay li label {
      display: block;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
    }

    .payBtn {
      font-size: 0.4rem;
      color: #fff;
      width: 6rem;
      height: 1rem;
      line-height: 1rem;
      text-align: center;
      margin: auto;
      background: url('$!{Const.getCdn()}/img/weixinChat/download.png') no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      bottom: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
    }

    .payBtn img {
      width: 100%;
    }

    .recodeBtn {
      position: absolute;
      color: #fafafa;
      right: 4%;
      top: 18%;
      background: #2694f2;
      border-radius: 6px;
      width: 2rem;
      height: 0.6rem;
      text-align: center;
      line-height: 0.6rem;
      font-size: 0.3rem;
    }

    #mobile {
      border: none;
      font-size: 17px;
      color: #666;
      background: #fafafa;
    }

    #recode {
      border: none;
      font-size: 17px;
      color: #666;
      background: #fafafa;
    }

    /* 蒙层 */
    #mcover {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: none;
      z-index: 20000;
    }

    #mcover img {
      position: fixed;
      left: 4%;
      right: 20px;
      top: 5px;
      width: 92%;
      z-index: 20001;
    }

    .bgchange {
      background: #5f5b5b !important;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 导航头 -->
    <!-- <div class="navigation">
      <div class="view" onclick="window.history.go(-1)">
        <img class="back" src="$!{Const.getCdn()}/img/weixinChat/back.png" alt="">
      </div>
      <div class="header">绑定手机号</div>
      <div class="content"></div>
    </div> -->

    <div class="mainBox_hasNav" id="background">
      <ul class="payWay">
        <li>
          <label for="zfb">
            <span class='pleaseTel'></span>
            <span><input type="number" name="mobile" placeholder="请输入手机号" id="mobile" /></span>
            <a id="btn" onclick="getReCode(this)" class="recodeBtn">获取验证码</a>
          </label>
        </li>
        <li>
          <label for="wx">
            <span class='pleaseTel'></span>
            <span><input type="text" name="recode" placeholder="请输入验证码" id="recode" /></span>
          </label>
        </li>
      </ul>

      <div class="payBtn" onclick="modifyAction()">去绑定</div>

      <!-- 跳浏览器蒙层 -->
      <div id="mcover" onClick="document.getElementById('mcover').style.display='';">
        <img src="$!{Const.getCdn()}/img/weixinChat/tishi.png">
      </div>
    </div>


  </div>

  <script>
    var httpHeader = '$!{httpHeader}';
    //获取验证码
    var getMobileCode = 'axios/wx/videoChat/getMobileCode';
    //绑定手机号
    var bindMobile = 'axios/wx/videoChat/bindMobile';

    window.disabled = false;

    //验证码倒计时
    function invokeSettime(obj) {
      var countdown = 60;
      settime(obj);

      function settime(obj) {
        if (countdown == 0) {
          $('#btn').removeClass('bgchange');
          window.disabled = false;
          $(obj).text("获取验证码");
          countdown = 60;
          return;
        } else {
          $('#btn').addClass('bgchange');
          window.disabled = true;
          $(obj).text("(" + countdown + ") s 重新发送");
          countdown--;
        }

        setTimeout(function () {
          settime(obj)
        }, 1000)
      }
    }

    //绑定手机号 验证码
    function getReCode(obj) {
      var mobile = $('#mobile').val()
      if (!(/^1(3|4|5|7|8|9)\d{9}$/.test(trim(mobile)))) {
        layer.open({
          content: '请输入正确的手机号',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        });
        return;
      }

      if (disabled) return;
      invokeSettime(obj);
      var param = {
        "mobile": mobile
      }
      $.ajax({
        url: getMobileCode,
        type: 'post',
        data: JSON.stringify(param),
        contentType: 'application/json;charset=utf-8',
        headers: {
          'header-encrypt-code': httpHeader
        },
        dataType: "json",
        success: function (ret) {
          //提示
          if (ret.code == 0) {
            //提示
            layer.open({
              content: '发送成功',
              skin: 'msg',
              time: 2 //2秒后自动关闭
            });

          } else {
            //提示
            layer.open({
              content: ret.codemsg,
              skin: 'msg',
              time: 2 //2秒后自动关闭
            });
          }
        },
        complete: function () {

        }
      });
    };
    // 绑定手机号验证是否成功 成功去下载
    function modifyAction() {
      var mobile = $('#mobile').val();
      var recode = $('#recode').val();

      if (!(/^1(3|4|5|7|8|9)\d{9}$/.test(trim(mobile)))) {
        layer.open({
          content: '请输入正确的手机号',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        });
        return;
      }

      if ('' == trim(recode)) {
        layer.open({
          content: '验证码不能为空',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        });
        return;
      }


      var param = {
        "mobile": mobile,
        "recode": recode,
        mobileType: mobileType
      }
      $.ajax({
        url: bindMobile,
        type: 'post',
        data: JSON.stringify(param),
        contentType: 'application/json;charset=utf-8',
        headers: {
          'header-encrypt-code': httpHeader
        },
        dataType: "json",
        success: function (ret) {
          if (ret.code == 0) { //ret.data.data
            //提示
            layer.open({
              content: '绑定成功',
              skin: 'msg',
              time: 2 //2秒后自动关闭
            });
            //绑定成功去下载
            var downUrl = ret.data.downURL;
            appDown(downUrl)
            //返回上一页并刷新 window.location.href=document.referrer
          } else {
            //提示
            layer.open({
              // content: ret.codemsg,
              content: ret.codemsg,
              skin: 'msg',
              time: 2 //2秒后自动关闭
            });
          }
        },
        complete: function () {

        }
      });
    }


    function trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    }

    //判断是否微信登陆
    function isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
    }

    //判断是否qq登陆
    function isQQ() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/QQ/i) == "qq") {
        return true;
      } else {
        return false;
      }
    }

    function appDown(downUrl) {
      if (mobileType == 1) {
        if (isWeiXin() || isQQ()) {
          document.getElementById('mcover').style.display = 'block';
        } else {
          window.location.href = downUrl;
        }
      } else if (mobileType == 2) {
        document.getElementById('mcover').style.display = 'none';
        window.location.href = downUrl;
      }
    }
  </script>
</body>

</html>
avatar
文章
阅读
粉丝