开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情

实现js随机验证码

• 效果

① 目标：单纯前端实现各种类型的验证码，可组合使用，包含数字，大写字母，小写字母，可控制长度，可随机生成不同长度的验证码

② 准备：

认识 js中charAt的使用

charAt() 方法可返回指定位置的字符。

————————————————————————————————

• 语法格式：

string.charAt(index) //index必填，表示字符串中某个位置的数字，即字符在字符串中的下标。

————————————————————————————————

• 使用方式：

var str="Hello world!"；
str.charAt(1); //e  ,下标从0开始数

————————————————————————————————

③ 效果

定义数字、大写字母、小写字母

var selectNmuber = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

var selectbZimu=new Array('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');

var selectsZimu=new Array('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');

- 随机数字+大写字母组合四位数

第一种-使用charAt() 方法实现数字

   var semNmuber="1234567890"; 
   var valueNmuber='',i; 
   for(let j=1;j<=4;j++){ 
         i = parseInt(10*Math.random()); 　
         valueNmuber = valueNmuber + semNmuber.charAt(i);
   }
  console.log(valueNmuber);

第二种-随机下标实现数字(感觉思路很好)

 // 第二种
 var codeNmuber = "",codebZimu = "",codesZimu = "";
 var codeLength = 4;//验证码的长度,这是写死的
      // var codeLength = Math.floor(Math.random()*(7-4)+4); //随机生成验证码的长度
      //Math.random()用法，取num1-num2之间随机数：Math.random()*(num2-num1)+num1
      //获取值 //所有候选组成验证码的字符，这里只是数字和大小写字母

  
for (var i = 0; i < codeLength; i++) {
          var NmuberIndex = Math.floor(Math.random() * selectNmuber.length); 
          //生成0-最大字符串的 数字
          var bZimuIndex = Math.floor(Math.random() * selectbZimu.length); 
          //生成0-最大字符串的 大写字母
          var sZimuIndex = Math.floor(Math.random() * selectsZimu.length); 
          //生成0-最大字符串的 小写字母
          codeNmuber += selectNmuber[NmuberIndex];
          codebZimu += selectbZimu[bZimuIndex];
          codesZimu += selectsZimu[sZimuIndex];
 }
 console.log(codeNmuber,codebZimu,codesZimu);

④ 完整部分(可以直接复制)

• 增加背景颜色随机

// 新增试用码-前端随机生成方法
creatcode(){

var selectNmuber = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
var selectbZimu=new Array('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'); 
var selectsZimu=new Array('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');

//第一种-使用charAt() 方法实现数字
 var semNmuber="1234567890"; 
 var valueNmuber='',i; 
 for(let j=1;j<=4;j++){ 
         i = parseInt(10*Math.random()); 　
         valueNmuber = valueNmuber + semNmuber.charAt(i);
 }
 console.log(valueNmuber);
 
 
 // 第二种
 var codeNmuber = "",codebZimu = "",codesZimu = "";
 var codeLength = 4;//验证码的长度,这是写死的
      // var codeLength = Math.floor(Math.random()*(7-4)+4); //随机生成验证码的长度
      //Math.random()用法，取num1-num2之间随机数：Math.random()*(num2-num1)+num1
      //获取值 //所有候选组成验证码的字符，这里只是数字和大小写字母
    for (var i = 0; i < codeLength; i++) {
              var NmuberIndex = Math.floor(Math.random() * selectNmuber.length); 
              //生成0-最大字符串的 数字
              var bZimuIndex = Math.floor(Math.random() * selectbZimu.length); 
              //生成0-最大字符串的 大写字母
              var sZimuIndex = Math.floor(Math.random() * selectsZimu.length); 
              //生成0-最大字符串的 小写字母
              codeNmuber += selectNmuber[NmuberIndex];
              codebZimu += selectbZimu[bZimuIndex];
              codesZimu += selectsZimu[sZimuIndex];
  }
 console.log(codeNmuber,codebZimu,codesZimu);
 
 
//随机背景颜色
//使用RGB显示随机背景颜色，取值范围0-255
         var r = Math.floor(Math.random() * 256),
          g = Math.floor(Math.random() * 256),
          b = Math.floor(Math.random() * 256);
         var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
      console.log(rgb);
  //使用  元素.style.backgroundColor = rgb; 


},

• 验证码验证函数

//验证
   function validate() {
       var inputCode = document.getElementById("元素ID").value;
         if (inputCode.length <= 0) {
             alert("请输入验证码！");
              createCode(); //刷新验证码 
        } else if (inputCode.toUpperCase() != code.toUpperCase()) { 
             alert("验证码输入错误！");
              createCode();  
        } else {
           alert("通过");
         }
  }
————————————————

————————————————————————————————

最后实现随机效果1

最后实现随机效果2

顺利实现功能，然后继续可以封装使用成验证码！