web前端

在平时我们登录或者注册时，都会见到要输入验证码的功能，当输入正确时才可以进行登录或者注册，那我们如何使用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(&#39;input&#39;)[0];
4. var oSpan = document.getElementsByTagName(&#39;span&#39;)[0];
5. var oBtn = document.getElementsByTagName(&#39;button&#39;)[0];
6. var oMsg = document.getElementsByTagName(&#39;em&#39;)[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 = &#39;&#39;;
18. } else {
19. // 提示错误信息
20. oMsg.innerHTML = &#39;验证码输入错误&#39;;
21. }
22. }
24. }