JS中怎么实现随机生成验证码并提交验证
Admin 2022-06-15 群英技术资�
本文实例为大家分享了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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了vue中配置scss全局变量的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
这篇文章主要为大家详细介绍了JavaScript实现点击图片翻转效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了详解在node.js中require方法的加载规�,本文一步步解析了require加载规则,讲述了核心的模块,路径形式的模�,第三方模块等,需要的朋友可以参考下
vue3 沙箱主要分两种,浏览器编译版本,浏览器版本是使用with语法加上proxy代理拦截;本地预编译版本,通过在模版预编译阶段转换阶段,使用转换插件transformExpression将非白名单标识符挂在在组件代理对象下
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078