前端实现验证码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>验证码</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style></style>
  </head>
  <body>
    <div class="new-web-row">
      <span class="web-form-span ">验证码</span>
      <input
        type="text"
        class=" web-form-input "
        required="required"
        id="Yzm"
      />
      <input
        type="button"
        id="code"
        value="点我验证"
        class="btn-list-btn"
        onclick="createCode()"
      />
    </div>
    <script>
      // 在全局定义验证码
      let code 
      // 产生验证码函数
      let createCode = () => {
        code = ''
        let codeLength = 4 // 验证码的长度
        let checkCode = document.getElementById('code')
        // 随机数
        let random = [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'I',
          'J',
          'K',
          'L',
          'M',
          'N',
          'O',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'U',
          'V',
          'W',
          'X',
          'Y',
          'Z'
        ]
        for (let i = 0; i < codeLength; i++) {
          // 循环操作
          let index = Math.floor(Math.random() * 36) // 取得随机数的索引（0~35）
          code += random[index] // 根据索引取得随机数加到code上
        }
        checkCode.value = code // 把code值赋给验证码
      }
      // 网页一刷新就刷新验证码
      createCode()
      // 验证码校验函数
      let validate = () => {
        let inputCode = document.getElementById('Yzm').value.toUpperCase() // 取得输入的验证码并转化为大写
        if (inputCode.length <= 0) {
          // 若输入的验证码长度为0
          alert('请输入验证码！') // 则弹出请输入验证码
          $('#Yzm').focus() // 重新聚焦验证码框
          YZM = false
        } else if (inputCode != code) {
          // 若输入的验证码与产生的验证码不一致时
          alert('验证码输入错误！@_@') // 则弹出验证码输入错误
          createCode() // 刷新验证码
          $('#Yzm').val('') // 清空文本框
          $('#Yzm').focus() // 重新聚焦验证码框
          YZM = false
        } else {
          // 输入正确时
          $('#Yzm').blur() // 绑定验证码输入正确时要做的事
          YZM = true
          alert('验证码输入正确！@_@')
        }
      }
      // 校验验证码
      document.getElementById('Yzm').addEventListener('change', validate)
    </script>
  </body>
</html>
猜你喜欢
