随机验证码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <input type="text" id="codeInp">
  9.     <br>
  10.     <span id="codeBox">AAAA</span>
  11.     <button id="changeCode">看不清换一张</button>
  12.     <!-- IMPORT JS -->
  13.     <script>
  14.         let codeInp = document.getElementById('codeInp'),
  15.             codeBox = document.getElementById('codeBox'),
  16.             changeCode = document.getElementById('changeCode');
  17.         /*
  18.          * queryCode：获取到四位随机的验证码，然后放到指定的盒子中
  19.          *   @params
  20.          *   @return
  21.          * by Team on 2019/07/24  
  22.          */
  23.         function queryCode() {
  24.             // 准备获取范围的字符串 0~61
  25.             let area = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  26.             let result = "";
  27.             for (let i = 0; i < 4; i++) {
  28.                 // 每一次循环都获取一个随机的数字索引
  29.                 let ran = Math.round(Math.random() * 61);
  30.                 // 再根据获取的索引从范围字符串中找到对应的字符，把找到的字符拼接到最后的结果中
  31.                 result += area.charAt(ran);
  32.             }
  33.             // 放到盒子里面
  34.             codeBox.innerHTML = result;
  35.         }
  36.         // 第一次加载页面需要执行方法，让其显示在页面中
  37.         queryCode();
  38.         // 点击看不清按钮，需要重新执行方法生成新的验证码
  39.         changeCode.onclick = queryCode;
  40.         // 文本框失去焦点的时候：验证用户输入的内容和验证码是否相同，给予相关的提示，如果不一样需要重新生成验证码
  41.         // onblur：文本框失去焦点事件
  42.         codeInp.onblur = function () {
  43.             // 获取用户和验证码内容（表单元素.value / 非标单元素.innerHTML 获取内容）
  44.             let val = codeInp.value,
  45.                 code = codeBox.innerHTML;
  46.             // 不区分大小写的验证（都转成小写）
  47.             if (val.toLowerCase() === code.toLowerCase()) {
  48.                 alert('温馨提示：验证码输入成功！');
  49.             } else {
  50.                 alert('温馨提示：验证码输入有误，请重试！');
  51.                 codeInp.value = '';
  52.                 // 重新生成验证码
  53.                 queryCode();
  54.             }
  55.         }
  56.     </script>
  57. </body>
  58. </html>