自写短信验证登录demo练习（前端）

最新推荐文章于 2023-06-16 22:15:00 发布

Roselia❀

最新推荐文章于 2023-06-16 22:15:00 发布

阅读量596

点赞数 2

分类专栏：自写demo练习文章标签： js html

本文链接：https://blog.csdn.net/qq_28471889/article/details/107733134

版权

自写demo练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码练习，尽量用原生js

1 需求

在这里插入图片描述

点击获取验证码发送请求携带手机号信息
- 检查输入手机号是否有错误，有误红色字体标识
点击获取验证码后倒计时
登录发送请求携带手机号、验证码

2 完整代码

利用了jquery发送ajax

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      margin: 0 auto;
    }

    .verCode {
      width: 60%;
      margin: 60% auto 10%;
    }

    .verCode-input {
      width: 300px;
      height: 25px;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid rgba(0, 0, 0, .3);
      outline: none;
      background-color: rgba(0, 0, 0, 0);

    }

    .verCode-input-error {
      color: red;
      font: 400 13px Arial;
      position: absolute;
      top: 0;
      right: 2%;
      display: none;
    }

    .telNumber {
      padding-top: 10px;
      position: relative;
    }

    .verCode-a {
      position: relative;
      padding-top: 10px;
    }

    #getVerCode {
      position: absolute;
      right: 0;
      top: 32%;
      outline: none;
      border: 0;
      background: transparent;
      color: #175199;
    }

    .login {
      text-align: center;
      background: #0084ff;
      line-height: 35px;
      color: white;
      user-select: none;
    }

    .login:hover {
      background: #0077e6;
    }

  </style>
  <script src="jquery-1.12.4.js"></script>
</head>
<body>
<div class="box">
  <div class="verCode">
    <div class="telNumber">
      <input class="verCode-input a" placeholder="输入手机号" type="text">
      <p class="verCode-input-error">请输入正确手机号</p>
    </div>
    <div class="verCode-a">
      <input class="verCode-input b" placeholder="输入验证码" type="text">
      <button id="getVerCode">获取手机验证码</button>
    </div>
    <br>
    <div class="login">登录</div>
  </div>
</div>
</body>
<script>
  let verCodeBtn = document.getElementById("getVerCode");
  let telNumInp = document.getElementsByClassName('verCode-input')[0];
  let verCodeInpErr = document.getElementsByClassName('verCode-input-error')[0];
  let verCodeInp = document.getElementsByClassName('verCode-input a')[0];
  let loginBtn = document.getElementsByClassName('login')[0];
  let intervalFlag = true;
  let telNum = '';

  verCodeInp.onfocus = () => {
    verCodeInpErr.style.display = 'none';
  };
  verCodeBtn.onclick = () => {
    telNum = telNumInp.value;
    //正则判断telNum合法不
    let reg = /^1\d{10}$/;
    if (!reg.test(telNum)) {
      verCodeInpErr.style.display = 'inline';
      return
    }
    //按钮处开始倒计时
    let timesRun = 10;
    if (intervalFlag) {
      intervalFlag = false;
      let interval = setInterval(function (e) {
        verCodeBtn.innerHTML = timesRun + ' 秒后重试';
        if (timesRun <= 0) {
          verCodeBtn.innerHTML = '获取手机验证码'
          clearInterval(interval);
          intervalFlag = true;
        }
        timesRun--;
      }, 1000);

      // 发送请求给后台
      $.ajax({
        url: 'http://192.168.11.2/sendTelNum/',
        data: telNum,
        type: get,
        success: function (res) {
        }
      })
    }
  };

  loginBtn.onclick = () => {
    let varCode = verCodeInp.value;
    console.log(varCode);
    $.ajax({
      url: 'http:///www.123.com/sendTelNum/',
      data: {
        telNum: telNum,
        varCode: varCode
      },
      type: 'post',
      success: function (res) {
        if (res.data.success) {
          window.location.href = 'http://www.123.com/login/' + res.data.userID;
        }
      }
    })
  }
</script>
</html>