【JavaScript】综合案例-小兔鲜页面注册（2）

需求②：用户名验证（注意封装函数 verifyxxx），失去焦点触发这个函数
  正则 /^[a-zA-Z0-9-_]{6,10}$/
  如果不符合要求，则出现提示信息，并 return false 中断程序
  否则，则返回return true
  之所以返回布尔值，是为了最后的提交按钮做准备
  侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发（类似京东效果）

// change 事件 内容发送了变化
const input = document.querySelector('input')
input.addEventListener('change', function () {
    console.log(111)
})

==============================================================================

    // 2. 验证的是用户名
    // 2.1 获取用户名表单
    const username = document.querySelector('[name=username]')
    // 2.2 使用change事件 值发生变化的时候
    username.addEventListener('change', verifyName)
    // 2.3 封装verifyName函数
    function verifyName() {
      // console.log(11)
      const span = username.nextElementSibling
      // 2.4 定规则 用户名
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      if (!reg.test(username.value)) {
        // console.log(11)
        span.innerText = '输入不合法，请输入6-10位'
        return false
      }
      // 2.5 合法的 清空span
      span.innerText = ''
      return true
    }