课堂综合案例

运行代码：

<script>
           //需求①： 发送验证码
          // 用户点击之后，显示 05秒后重新获取
          // 时间到了，自动改为 重新获取
          let code = document.querySelector('.code')
          code.addEventListener('click', function () {
            this.innerHTML = `05秒后重新获取`
            let mark = 5
            let time = setInterval(function () {
              mark--
              code.innerHTML = `0${mark}秒后重新获取`
              if (mark === 0) {
                clearInterval(time)
                code.innerHTML = `重新获取`
    
              }
            }, 1000)
          })
    
    
          //     需求②： 用户名验证（注意封装函数 verifyxxx）
          //     正则 /^ [a - zA - Z0 - 9 - _]{ 6, 10 } $ /
          //       如果不符合要求，则出现提示信息 并 return false 
          // 否则 则返回return true 
          // 之所以返回 布尔值，是为了 最后的提交按钮做准备
          let username = document.querySelector('[name=username]') 
          //css属性选择器：通过属性进行选择标签 【属性=值】值不需要引号 等号两边不要加空格
          username.addEventListener('change', verifyUsername)
    
          // 封装函数verifyUsername  验证用户名是否满足正则表达式
          function verifyUsername() {
            let span = username.nextElementSibling
            let reg = /^[a-zA-Z0-9-_]{6,10}$/
            if (!reg.test(username.value)) {
              //如果不符合
              //给出提示信息
              span.innerHTML = '请输入6-10个字符'
              //return 退出函数
              return false
            }
            //如果符合  不给出提示
            span.innerHTML = ''
            return true   //这里返回的布尔值是用于提交按钮进行验证的 只要return的返回值有false 就无法提交
          }
    
    
    
          //       需求③： 手机号验证
          // 正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
          // 其余同上
          let phone = document.querySelector('[name = phone]')
          phone.addEventListener('change', verifyPhone)
          //封装手机验证函数
          function verifyPhone() {
            let span = phone.nextElementSibling
            let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
            if (!reg.test(phone.value)) {
              //如果手机号不合法 给出提示信息
              span.innerHTML = '请输入合法手机号'
              return false
            }
            //手机号合法
            span.innerHTML = ''
            return true
          }
    
    
    
    
          // 需求④： 验证码验证
          // 正则 /^\d{6}$/
          //   其余同上
          let inputCode = document.querySelector('input[name=code]')
          inputCode.addEventListener('change', verifyInputCode)
          function verifyInputCode() {
            let span = inputCode.nextElementSibling
            let reg = /^\d{6}$/
            if (!reg.test(inputCode.value)) {
              //验证码不符合 给出提示信息
              span.innerHTML = '请输入6位数字验证码'
              return false
            }
            //验证码合法
            span.innerHTML = ' '
            return true
          }
    
          // 需求⑤： 密码验证
          // 正则 /^[a-zA-Z0-9-_]{6,20}$/
          //   其余同上
          let password = document.querySelector('[name = password]')//
          password.addEventListener('change', verifypassword)
          //封装手机验证函数
          function verifypassword() {
            let span = password.nextElementSibling
            let reg = /^[a-zA-Z0-9-_]{6,20}$/
            if (!reg.test(password.value)) {
              //如果手机号不合法 给出提示信息
              span.innerHTML = '请输入合法密码'
              return false
            }
            //密码合法
            span.innerHTML = ''
            return true
          }
    
    
    
          //       需求⑥： 再次密码验证
          // 如果本次密码不等于上面输入的密码则返回错误信息
          // 其余同上
          let confirm = document.querySelector('[name=confirm]')
          confirm.addEventListener('change', verifyConfirm)
          function verifyConfirm() {
            let span = confirm.nextElementSibling
            if (password.value !== confirm.value) {
              span.innerHTML = '两次密码不一致'
              return false
            }
            span.innerHTML = ''
            return true
          }


        // 需求七：我同意模块
        // 切换类  .icon-queren2  则是默认选中样式
       let icon=document.querySelector('.icon-queren')
      icon.addEventListener('click',function(){
          //classList.toggle()切换
          this.classList.toggle('icon-queren2')
      })


        // 需求八：提交按钮模块
        // 使用 submit 提交事件
        // 如果上面的每个模块，返回的是 false 则 阻止提交
        // 如果没有勾选同意协议，则提示  需要勾选
        // 在提交之前先验证
        let form=document.querySelector('form')
        form.addEventListener('submit',function(e){
        
            if(!verifyUsername()){
                //返回值是false，需要阻止提交
                //事假对象的阻止默认行为：e.preventDefault()
                e.preventDefault()
            }
            if(!verifyConfirm()){
              //同上
              e.preventDefault()
            }
            if(!verifyInputCode()){
                e.preventDefault()
            }
            if(!verifyPhone()){
                e.preventDefault()
            }
            if(!verifypassword()){
                e.preventDefault()
            }
  // 如果没有勾选同意协议，则提示  需要勾选
  //classList.contains 是否包含，如果有则返回true，没有则返回false
  if(!icon.classList.contains('icon-queren2')){
      alert('请勾选同意框')
      e.preventDefault()
  }
        })
    </script>

运行效果：