最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript如何实现简单验证码 JavaScript实现简单验证码代码示例
时间:2020-08-24 编辑:袖梨 来源:一聚教程网
JavaScript如何实现简单验证码?本篇文章小编给大家分享一下JavaScript实现简单验证码代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
JavaScript实现简单验证码,供大家参考,具体内容如下
验证流程图
HTML部分
```javascript 543看不清换一张 验证码:
JavaScript部分
window.onload = function () { createCode(4); } // 创建验证码 function createCode(len) { // var code = ''; var codeLength = parseInt(len); //验证码的长度 var checkCode = document.getElementById('checkCode'); //获取画布 // 设置验证码 var codeArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'l', 'k', 'j', 'h', 'g', 'f', 'd', 's', 'a', 'p', 'o', 'i', 'u', 'y', 't', 'r', 'r', 'e', 'w', 'q', "Z", 'X', 'C', "V", "B", "N", "M", "A", "S", "D", "F", "G", "H", "J", "L", "K", "P", "O", "I", "U", "Y", "T", "R", "E", "W", "Q") //设置验证码颜色 // var num= Math.floor(Math.random() * 8) var color = '#'; var bgcolor = '#'; var fontcolor = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'); // 循环数组,随机获取 for (var i = 0; i < codeLength; i++) { //获取数组下标 var charNum = Math.floor(Math.random() * 62); // 存储数组 code = code + codeArray[charNum]; } if (checkCode && code.length == codeLength) { checkCode.innerHTML = code; } // 设置验证码颜色 for (var i = 0; i < 6; i++) { var colorNum = Math.floor(Math.random() * 15); color += fontcolor[colorNum]; } console.log(color) checkCode.style.color = color; // 设置画布背景颜色 for (var i = 0; i < 6; i++) { var colorNum = Math.floor(Math.random() * 15); bgcolor += fontcolor[colorNum]; } checkCode.style.backgroundColor = bgcolor; } // 检验验证码是否正确 function validateCode() { // 获取画布的验证码 var checkCode = document.getElementById("checkCode").innerHTML; // 获取用户输入的验证码,并且去掉空格 var inputCode = document.getElementById('inputCode').value.trim(); console.log(checkCode) console.log(inputCode) // 判断是否相等 if (inputCode.length < 4) { alert('验证码长度为四位'); createCode(4); } else if (checkCode.toLocaleLowerCase() != inputCode.toLocaleLowerCase()) { alert('输入验证码不正确!'); createCode(4); } else { alert('正确') } }
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12