生成随机数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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 动态加载js脚本
- js轮播图片(JS实现简单图片轮播效果)
- JS函数前面感叹号的作用
- sqlserver技术文档(sql server2016里面的json功能浅析)
- js Date对象
- js数组去重复
- ExtJs中怎么上传文件
- js限制用户(如何用JS追踪用户)
- JS实现金额大小写转换
- ASP.NET中使用CodeDomProvider调用js文件中的js方法
- nodejsweb服务(Nodejs实现内网穿透服务)
- js怎么转拼音(js实现中文转拼音的完整步骤记录)
- js实现页面自动跳转
- python 接口测试怎么校验json数据(python接口自动化十七--Json 数据处理---一次爬坑记详解)
- JS中sort()和reverse()
- js时间日期处理
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
热门推荐
- 腾讯云服务器怎么重装系统(腾讯云服务器如何重装系统)
- css3独有属性(CSS3 calc会计算属性详解)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- sql server convert 函数(sql server通过pivot对数据进行行列转换的方法)
- JS中错误处理
- mysql主键为什么用varchar(Mysql中varchar类型一些需要注意的地方)
- 微信公众号怎么开发页面(微信公众平台开发教程②微信端分享功能图文详解)
- python中的pandas功能(Python常见的pandas用法demo示例)
- dedecms网站空白(DEDECMS支持中文水印的解决方法)
- event.preventDefault方法的使用