短信验证功能

最新推荐文章于 2024-03-05 08:30:00 发布
渡梵尘
最新推荐文章于 2024-03-05 08:30:00 发布
阅读量246
点赞数
本文链接：https://blog.csdn.net/lx_dfc/article/details/83746713
版权
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单注册</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #F7F7F7;
    }

    ul {
      margin: 0;
      padding: 50px;
      list-style: none;
    }

    .register {
      width: 800px;
      margin: 50px auto;
      background-color: #FFF;
      border: 1px solid #CCC;
      border-radius: 5px;
    }

    li {
      overflow: hidden;
      margin: 20px 0;
    }

    label,
    input {
      display: block;
      float: left;
      height: 46px;
      font-size: 24px;
      box-sizing: border-box;
      color: #333;
    }

    label {
      width: 200px;
      line-height: 46px;
      margin-right: 30px;
      text-align: right;
    }

    input {
      width: 320px;
      padding: 8px;
      line-height: 1;
      outline: none;
      position: relative;
    }

    input.code {
      width: 120px;
    }

    input.sendBt {
      width: 190px;
      margin-left: 10px;
    }

    input.disabled {
      background-color: #CCC !important;
    }

    input[type=button] {
      border: none;
      color: #FFF;
      background-color: #E64145;
      border-radius: 4px;
      cursor: pointer;
    }

    .tips {
      position: fixed;
      top: 0;
      width: 100%;
      height: 40px;
      text-align: center;

    }
    
    .tips p {
      min-width: 300px;
      max-width: 400px;
      line-height: 40px;
      margin: 0 auto;
      color: #FFF;
      display: none;
      background-color: #E64145;
      border-radius: 5px;
    }
  </style>
</head>

<body>
<div class="register">
  <form id="ajaxForm">
    <ul>
      <li>
        <label>用户名</label>
        <input type="text" name="name" class="name">
      </li>
      <li>
        <label>请设置密码</label>
        <input type="password" name="pass" class="pass">
      </li>
      <li>
        <label>请确认密码</label>
        <input type="password" class="repass">
      </li>
      <li>
        <label>验证手机</label>
        <input type="text" name="mobile" class="mobile" id="mobile">
      </li>
      <li>
        <label>短信验证码</label>
        <input type="text" name="code" class="code">
        <input type="button" value="获取验证码" class="sendBt" id="sendBt">
      </li>
      <li>
        <label></label>
        <input type="button" class="submit" value="立即注册" id="submitBt">
      </li>
    </ul>
  </form>
</div>
<!-- 提示信息 -->
<div class="tips">
  <p>用户名不能为空</p>
</div>

<script src="jquery-1.12.4.js"></script>
<script>

  function showTips(tips) {
    $(".tips>p").text(tips).stop(true).fadeIn(500).delay(2000).fadeOut(500);
  }

  function recoverBtn(ele, text) {
    ele.val(text).prop("disabled", false).removeClass("disabled");
  }

  //功能一：获取短信验证码
  $("#sendBt").on("click", function () {

    var mobile = $(".mobile").val();
    //校验
    if (mobile === "") {
      showTips("手机号不能为空");
      return;
    }
    if (!/^1\d{10}$/.test(mobile)) {
      showTips("手机号格式错误");
      return;
    }

    //先把验证码按钮禁用了，防止用户多次点击
    $("#sendBt").val("发送中....").prop("disabled", true).addClass("disabled");

    //发送ajax请求
    $.ajax({
      type: 'get',
      url: 'getCode.php',
      data: {
        mobile: mobile
      },
      dataType: 'json',
      success: function (info) {
        //info.code:100 成功   code:101:手机号重复
        if (info.code === 101) {
          showTips("手机号存在了");
          recoverBtn($("#sendBt"), "获取验证码");
        }

        if (info.code === 100) {
          //开启倒计时
          showTips("短信发送成功了");
          var count = 10;
          var timeId = setInterval(function () {
            count--;
            $("#sendBt").val(count + "秒后再次发送");
            if (count === 0) {
              clearInterval(timeId);
              recoverBtn($("#sendBt"), "获取验证码");
            }
          }, 1000);
        }
      },
      error: function () {
        showTips("服务器繁忙，请稍候再试");
        //恢复按钮
        recoverBtn($("#sendBt"), "获取验证码");
      }
    });
  });

  //功能二：注册功能
  $("#submitBt").on("click", function () {
    //表单校验
    var name = $(".name").val();
    if (name === "") {
      showTips("用户名不能为空");
      return;
    }

    var pass = $(".pass").val();
    var repass = $(".repass").val();
    if (pass === "") {
      showTips("用户密码不能为空");
      return;
    }
    if (pass !== repass) {
      showTips("密码与确认密码不一致");
      return;
    }

    var mobile = $(".mobile").val();
    if (!/^1\d{10}$/.test(mobile)) {
      showTips("手机号格式错误");
      return;
    }

    var code = $(".code").val();
    if (!/^\d{4}$/.test(code)) {
      showTips("验证码格式错误");
      return;
    }

    //禁用注册按钮
    $("#submitBt").val("注册中...").prop("disabled", true).addClass("disabled");

    $.ajax({
      type: 'post',
      url: 'register.php',
      data: $("form").serialize(),
      dataType: 'json',
      success: function (info) {
        if (info.code == 100) {
          showTips("恭喜你注册成功了,3秒后跳转到首页");
          setTimeout(function () {
            location.href = "index1.html";
          }, 3000);
        }

        if (info.code === 101) {
          showTips("账号已经存在了");
          recoverBtn($("#submitBt"), "立即注册");
        }

        if (info.code === 102) {
          showTips("验证码错误");
          recoverBtn($("#submitBt"), "立即注册");
        }
      },
      error: function () {
        showTips("服务器繁忙，请稍候再试");
        //恢复注册按钮
        recoverBtn($("#submitBt"), "立即注册");
      }
    });
  });

</script>

</body>

</html>