【Web前端基础知识】Js实现验证码功能

在平时我们登录或者注册时，都会见到要输入验证码的功能，当输入正确时才可以进行登录或者注册，那我们如何使用js来实现一个输入验证码的进行验证的功能呢。

验证码生成的内容都是随机的，所以需要先获取一个随机数，根据这个随机数再去获取一个随机的数字或字母，最后将获取到的四位随机数字或字母组合到一起，就生成了一个随机的验证码。

首先我们先声明一个字符串，内容为0-9、a-z、A-Z，再完成一个获取随机数的函数封装，利用数学对象的获取随机数方法Math.random()，取一个从0到该字符串长度的随机数字。

获取随机数

根据思路我们先完成一个获取随机数的函数封装，利用数学对象的获取随机数方法Math.random()，得到一个最大值到最小值之间的数字，最后进行一下取整。

1. // 获取最大值到最小值之间的随机数 
2. function getRandom(min, max) { 
3.     return Math.floor( Math.random() * ( max - min + 1 ) + min ); 
4. } 

获取验证码

声明一个字符串str，内容为0-9、a-z、A-Z，因为接下来验证码字符的取值就是在这些字符中进行的取值。调用获取随机数的函数，获得一个范围在0到str.length - 1的随机数字，以该数字为下标从字符串str中取出一个字符。假如现在要生成一个四位的随机验证码，我们就通过for循环来生成四位随机字符，随后把这四位随机字符拼接在一起。把该过程封装成为一个函数，将验证码作为函数的返回值return出去。

1. // 获取随机验证码 
2. function getCode() { 
3.     var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; 
4. var code = ''; //验证码 
5. // 循环生成四位的随机字符 
6. for ( var i = 0; i < 4; i++ ) { 
7. // 获取一个 
8.         var n = getRandom(0, str.length - 1); 
9.         var s = str[n]; 
10.         code += s; 
11.     } 
12.     return code; 
13. } 

在页面中使用

Html代码为：

1. <input type="text" > 
2. <span></span> 
3. <em></em><br> 
4. <button>验证</button> 

在页面中进行使用时，首次打开页面时调用获取验证码的函数，将返回的随机验证码赋值给标签，点击标签时刷新验证码，即点击时再次调用getCode函数，给验证码标签赋值。

点击验证按钮时比较验证码标签和输入框的内容，不一致时提示输入错误。

js的代码为：

1. window.onload = function () {  
2. // 获取标签 
3. var oInp = document.getElementsByTagName('input')[0]; 
4. var oSpan = document.getElementsByTagName('span')[0]; 
5. var oBtn = document.getElementsByTagName('button')[0]; 
6. var oMsg = document.getElementsByTagName('em')[0]; 
7. // 初始页面验证码的内容 
8. oSpan.innerHTML = getCode(); 
9. // 点击重新生成新的验证码 
10. oSpan.onclick = function() { 
11.     oSpan.innerHTML = getCode(); 
12. } 
13. // 点击验证按钮进行验证 
14. oBtn.onclick = function() { 
15. // 比较输入框的内容和验证码标签的内容     
16. if ( oInp.value == oSpan.innerHTML ) { 
17.         oMsg.innerHTML = ''; 
18.     } else { 
19.         // 提示错误信息 
20.         oMsg.innerHTML = '验证码输入错误'; 
21.     } 
22. } 
23.  
24. }