验证码
验证码有很多种类,有图片,字符串,短信…首先,我们一般不能使用JS来实现验证,一般都是后台返回的,要不用户可以直接禁用JS,跳过验证,而且客户端实现的都是不安全的。这里我们使用JS来模拟验证码。
生成一个随机四位数的验证码
需求:随机生成一个包含字母或数字的四位数验证码
思路
思路一
- 我们可以定义一个包含所有数字和字母的字符串str
- 获取它的长度str.length
- 在[0,str.length-1]的区间内随机生成一个数字num
- 通过随机位置num返回当前指定的字符串,str.charAt(num)
- 生成四个后,拼接成一个新的字符串(concat)
- 这种方法可行不可取,代码可读性不强
思路二
- 可以利用字符串和正则表达式,和上面的方式都是半斤八两
思路三
- 利用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 值,然后返回一个字符串。
- 最终版
- 过滤掉产生随机数[48,122]不是在 48-57,65-90,97-122范围内
- 将产生四个随机的数,放入一个数组中
- 将数组切为字符串放入到fromCharCode中
- 代码整改的最终效果
<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>
- 提醒
- 记不住unicode可以利用字符串方法charCodeAt(),该方法返回当前指定位置的字符串的Unicode编码
- 可以利用画布或则css3更丰富的写到页面上
其它验证码
- 当然也可以随机实现汉字,汉字的unicode在/ \u4e00-\u9fa5/区间
- 图片滑动验证的话,可以通过client来定位