制作一个简单的注册页面

1.发送验证码部分,使用计时函数setInterval()进行倒计时操作

//1.发送验证码模块
    const code = document.querySelector('.code')
    // 设置一个标志flag,避免重复点击
    let flag = true
    code.addEventListener('click', function () {//添加一个点击事件
      if (flag) {
        flag = false
        let i = 5
        //点击后立马触发
        code.innerHTML = `${i}秒后重新发送`
        const time = setInterval(function () {//开启定时器
          i--
          code.innerHTML = `${i}秒后重新发送`
          if (i === 0) {//关闭定时器
            code.innerHTML = `重新发送`
            clearInterval(time)
            flag = true
          }
        }, 1000)
      }
    })

2.验证用户名部分,使用封装函数方便后续登录验证

// 2.验证用户名称部分
    const user = document.querySelector('[name=username]')
    // 添加change事件
    user.addEventListener('change', verifyName)//verify封装函数
    function verifyName() {
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      const span = user.nextElementSibling
      //输入不合法
      if (!reg.test(user.value)) {
        span.innerHTML = '输入不合法,请输入6-10位字符'
        return false
      }
      //输入合法
      span.innerHTML = ''
      return true
    }

3.验证手机号部分

 // 3.验证手机号部分
    const phone = document.querySelector('[name=phone]')
    // 添加change事件
    phone.addEventListener('change', verifyPhone)//verify封装函数
    function verifyPhone() {
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      const span = phone.nextElementSibling
      //输入不合法
      if (!reg.test(phone.value)) {
        span.innerHTML = '手机号输入不规范'
        return false
      }
      //输入合法
      span.innerHTML = ''
      return true
    }

4.验证码部分

    // 4.验证验证码部分
    const codeInput = document.querySelector('[name=code]')
    // 添加change事件
    codeInput.addEventListener('change', verifyCode)//verify封装函数
    function verifyCode() {
      const reg = /^\d{6}$/
      const span = codeInput.nextElementSibling
      //输入不合法
      if (!reg.test(codeInput.value)) {
        span.innerHTML = '验证码输入不规范'
        return false
      }
      //输入合法
      span.innerHTML = ''
      return true
    }

5.密码部分

// 5.验证密码部分
    const password = document.querySelector('[name=password]')
    // 添加change事件
    password.addEventListener('change', verifyPassword)//verify封装函数
    function verifyPassword() {
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      const span = password.nextElementSibling
      //输入不合法
      if (!reg.test(password.value)) {
        span.innerHTML = '密码输入不规范'
        return false
      }
      //输入合法
      span.innerHTML = ''
      return true
    }

6.再次验证密码部分

    // 6.再次验证密码部分
    const confirm = document.querySelector('[name=confirm]')
    // 添加change事件
    confirm.addEventListener('change', verifyConfirm)//verify封装函数
    function verifyConfirm() {
      const span = confirm.nextElementSibling
      //输入不合法
      if (confirm.value != password.value) {
        span.innerHTML = '两次密码输入不一致'
        return false
      }
      //输入合法
      span.innerHTML = ''
      return true
    }

7.用户协议部分

// 7.用户协议模块
    const iconfont = document.querySelector('.icon-queren')
    iconfont.addEventListener('click', function () {
      this.classList.toggle('icon-queren2')
      // console.log(iconfont.classList.contains('icon-queren2'));
    })

8.提交按钮部分,当满足所有条件时,点击提交就会跳转页面.否则不会进行提交,这里检测用户协议部分使用了contains()函数进行检测用户是否点击了用户协议服务。

//8.提交模块
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      if (!iconfont.classList.contains('icon-queren2')) {//用户协议未点击
        return alert('请勾选用户协议')
        e.preventDefault()//阻止提交
      }
      // 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
      // console.log(verifyName())
      if (!verifyName()) e.preventDefault()
      if (!verifyPhone()) e.preventDefault()
      if (!verifyCode()) e.preventDefault()
      if (!verifyPassword()) e.preventDefault()
      if (!verifyConfirm()) e.preventDefault()
    })