JS实现随机验证码

待我称王封你为后i 2022-03-29 09:41 408阅读 0赞

## 验证码 ##

验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的。这里我们使用JS来模拟验证码。

## 生成一个随机四位数的验证码 ##

需求：随机生成一个包含字母或数字的四位数验证码

--------------------

### 思路 ###

#### 思路一 ####

1.  我们可以定义一个包含所有数字和字母的字符串str
2.  获取它的长度str.length
3.  在\[0,str.length-1\]的区间内随机生成一个数字num
4.  通过随机位置num返回当前指定的字符串，str.charAt(num)
5.  生成四个后，拼接成一个新的字符串(concat)
6.  这种方法可行不可取，代码可读性不强

#### 思路二 ####

1.  可以利用字符串和正则表达式，和上面的方式都是半斤八两

#### 思路三 ####

*  利用unicode编码
 *  我们可以查看unicode编码可知验证码对应的编码都是数字

0-9  A-Z   a-z对应的unicode是 48-57  65-90  97-122

*  而Math.random()产生的随机数也是数字，那我们生成随机在\[48,122\]区间的unicode编码

function ranNum(min,max){ 
    		return parseInt(Math.random()*(max-min+1)+min)
    	}
    	console.log(ranNum(48,122))

*  我们可以利用fromCharCode将unicode返回成我们想要的验证码

String.fromCharCode(numX,numX,...,numX)
    fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

*  最终版

1.  过滤掉产生随机数\[48,122\]不是在 48-57,65-90,97-122范围内
2.  将产生四个随机的数，放入一个数组中
3.  将数组切为字符串放入到fromCharCode中
4.  代码整改的最终效果

1.  提醒