小兔鲜页面注册

最新推荐文章于 2024-10-10 17:42:11 发布
qq_30437579
最新推荐文章于 2024-10-10 17:42:11 发布
阅读量67
点赞数
文章标签： html5 javascript
本文链接：https://blog.csdn.net/qq_30437579/article/details/132557788
版权
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码  ">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <input name="code" type="text" placeholder="短信验证码">
            <span class="msg"></span>
            <a class="code" href="javascript:;">发送验证码</a>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">

            <input name="queren" type="checkbox" class="iconfont icon-queren" />
            已阅读并同意<i>《用户服务协议》</i>
          </div>
          <div class="xtx-form-item">
            <button class="submit">下一步</button>
            <!-- <a class="submit" href="javascript:;">下一步</a> -->
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    const code = document.querySelector('.code')
    let flag = true
    code.addEventListener('click', function () {
      if (!flag) return
      flag = false
      let m = 4
      this.innerHTML = `${m}s 后免费获取`
      // debugger
      let timer = setInterval(() => {
        m--
        this.innerHTML = `${m}s 后免费获取`
        if (m == 0) {
          this.innerHTML = `发送验证码`
          clearInterval(timer)
          timer = null
          flag = true
        }

      }, 1000)

    })

    const form = document.querySelector('form')

    //用户名
    const username = form.username
    const regUser = /^[a-zA-Z0-9-_]{6,10}$/
    const msgUser = '用户名不合法'
    username.addEventListener('change', function () {
      verifyFn.apply(username, [regUser, msgUser])
    })

    // 手机号
    const phone = form.phone
    const regPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    const msgPhone = '手机号不合法'
    phone.addEventListener('change', function () {
      verifyFn.apply(phone, [regPhone, msgPhone])
    })

    //验证码
    const codeeEnter = form.code
    const regCode = /^\d{6}$/
    const msgCode = '输入不合法，请输入6位数字'
    codeeEnter.addEventListener('change', function () {
      verifyFn.apply(codeeEnter, [regCode, msgCode])
    })

    //密码
    const password = form.password
    const regPwd = /^[a-zA-Z0-9-_]{6,20}$/
    const msgPwd = '输入不合法,请输入6~20位数字、字母、符号组成'
    password.addEventListener('change', function () {
      verifyFn.apply(password, [regPwd, msgPwd])
    })

    //密码
    const confirm = form.confirm
    function verifyConfirm () {
      const span = confirm.nextElementSibling
      if (confirm.value.trim() !== password.value.trim()) {
        span.innerHTML = '两次密码输入不一致'
        return false
      }
      span.innerText = ''
      return true
    }
    confirm.addEventListener('change', verifyConfirm)

    const queren = form.queren
    form.addEventListener('submit', function (e) {
      if (!queren.checked) {
        alert('请勾选同意协议')
        // 阻止提交
        e.preventDefault()
      }
      if (!verifyFn.apply(phone, [regPhone, msgPhone])) e.preventDefault()
      if (!verifyFn.apply(username, [regUser, msgUser])) e.preventDefault()
      if (!verifyFn.apply(codeeEnter, [regCode, msgCode])) e.preventDefault()
      if (!verifyFn.apply(password, [regPwd, msgPwd])) e.preventDefault()
      if (!verifyConfirm()) e.preventDefault()

    })

    function verifyFn (reg, msg) {
      const span = this.nextElementSibling
      if (!reg.test(this.value)) {
        span.innerHTML = msg
        return false
      }
      span.innerHTML = ''
      return true
    }
  </script>
</body>

</html>