JavaScript中怎么随机生成验证码并进行校验,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<body> <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode"></span> <a href="#" id="linkbt">看不清,换一张</a> </div> <div class="input_code"> <label for="inputCode">验证码:</label> <input type="text" id="inputCode"> <span id="text_show"></span> </div> <input type="button" id="Button1" value="确认"> </div> <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>
看完上述内容,你们掌握JavaScript中怎么随机生成验证码并进行校验的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。