生成随机数javascript(JavaScript实现随机生成验证码及校验)
类别:编程学习 浏览量:615
时间:2021-11-01 10:12:32 生成随机数javascript
JavaScript实现随机生成验证码及校验本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码,供大家参考,具体内容如下
输入验证码(区分大小写)点击确认,进行校验。出错就弹框提示
点击 看不清 重新随机生成验证码
当验证码输入错误时进行提示
<body> <li class="v_code"> <li class="code_show"> <span class="code" id="checkCode"></span> <a href="#" id="linkbt">看不清,换一张</a> </li> <li class="input_code"> <label for="inputCode">验证码:</label> <input type="text" id="inputCode"> <span id="text_show"></span> </li> <input type="button" id="Button1" value="确认"> </li> <script> // 1.生成验证码 // 6位数 0-9 a-f 随机生成6位 内容必须是0-9 a-f 字符串 // 数组 下标 0、1、2…… 从数组当中 随机下标 0-15位 // 2.进行验证 点击确认时,进行对比 window.onload = function() { const randomWord = () => { let code = ''; for (var i = 0; i < 6; i++) { var type = getRandom(1,3); switch(type) { case 1: code += String.fromCharCode(getRandom(48,57)) // 数字 break; case 2: code += String.fromCharCode(getRandom(65,90)); //大写字母 break; case 3: code += String.fromCharCode(getRandom(97,122)); //小写字母 break; } } return code; } function getRandom (min, max) { return Math.round(Math.random()*(max-min)+min) } // 调用取数函数 const rand = randomWord(); //console.log(rand); var checkCode = document.getElementById('checkCode'); checkCode.innerText = rand; // 点击切换随机数 var linkbt = document.getElementById('linkbt'); linkbt.addEventListener('click', function() { checkCode.innerText = randomWord(); }) // 提交进行对比 document.getElementById('Button1').onclick = function() { var inputCode = document.querySelector('#inputCode'); if (inputCode.value != checkCode.innerText) { alert('您输入的验证码不正确'); inputCode.value = ''; return false; } else { alert('输入正确'); } } } </script> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- Extjs msgTarget 提示位置
- php 结果集转json(PHP的JSON封装、转变及输出操作示例)
- python json转换字符串(python3 json数据格式的转换dumps/loads的使用、dict to str/str to dict、json字符串/字典)
- js数组的sort排序
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- js定时器几分钟执行(利用JS定时器实现元素移动)
- extjs radiogroup赋值和取值
- mysql的json格式解析(mysql json格式数据查询操作)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- 动态加载js脚本
- js闭包可以解决哪些问题(JavaScript中let避免闭包造成问题)
- JS闭包的用法
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- js array的所有方法(js 数组 find,some,filter,reduce区别详解)
- jquery遍历json字符串
- python操作json库(Python将json文件写入ES数据库的方法)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
热门推荐
- 完整版sqlserver2019卸载教程(Sql Server 2012完全卸载方法 只需8步轻松卸载)
- python变量与对象的关系(Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析)
- .NET异常处理的几个建议
- 如何获取gridview隐藏列的值
- php自定义函数返回多少个值(PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- VS中Code Snippet 代码段
- pythonmatplotlib怎么用(Python matplotlib画图与中文设置操作实例分析)
- laravel自定义使用方法(Laravel使用Queue队列的技巧汇总)
- pythonhtml文件转换成pdf库(Python3转换html到pdf的不同解决方案)