JS实现随机验证码

验证码

验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用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. 代码整改的最终效果

<script>
	function ranNum(min,max){
		return function(){
			// 利用闭包，等我们需要产生随机数在调用
			return parseInt(Math.random()*(max-min+1)+min)
		}
	}
	// 即将产生在48-122区间的随机的一个unicode编码，未调用
	var myUni = ranNum(48,122)
	// 用来装四个符合[0-9a-zA-Z]的unicode编码
	var arr = []
	// 产生四个unicode放入arr数组中
	// 当arr没有装满四个时
	while(arr.length!==4){
		// 产生一个随机码
		var num = myUni()
		// 符合需求在48-57,65-90,97-122的随机数放入arr数组中，知道arr装满四个
        if (num >= 48 && num <= 57 || num >= 65 && num <= 90 || num >= 97 && num <= 122){
              arr.push(num)
        }
	}
	// 此时拿到了随机的四个unicode
	// 利用String.fromCharCode
	// 可以使用arr.join(',')切割字符串，也可以使用apply
	var authCode = String.fromCharCode.apply(null,arr)
	console.log(authCode)
</script>

5. 提醒

• 记不住unicode可以利用字符串方法charCodeAt(),该方法返回当前指定位置的字符串的Unicode编码
• 可以利用画布或则css3更丰富的写到页面上

其它验证码

1. 当然也可以随机实现汉字，汉字的unicode在/ \u4e00-\u9fa5/区间
2. 图片滑动验证的话，可以通过client来定位