JS验证码
Posted INSTANCE_SELF
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS验证码相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>JS实现生成随机验证码并验证功能</title> <style> *{ margin: 0; padding: 0; } .wrap{ width: 500px; margin: 20px auto; } #text{ height: 30px; box-sizing: border-box; vertical-align: middle; text-indent: 1em; } #code{ display: inline-block; width: 80px; height: 30px; background: #aaa; text-align: center; line-height: 30px; color: #fff; text-decoration: none; letter-spacing: 7px; padding-left: 7px; vertical-align: middle; font-weight: bold; } #btn{ width: 60px; height: 30px; outline: 0; border: #153021; background: #499990; color: #fff; border-radius: 5px; } </style> </head> <body onload= "createCode()"> <div class="wrap"> <input type="text" id="text" placeholder = "请输入验证码"> <a href="javascript:" id="code" onclick="createCode( this )"></a> <input type="button" id="btn" value="验证" onclick="validate()"> </div> <script> //功能实现 ：自动生成验证码，点击验证按钮的时候匹配字符串成功则跳转到百度失败input输入框为空，继续随机生成； var input = document.getElementById("text"); var btn = document.getElementById(\'btn\'); var codes = document.getElementById(\'code\'); var inputext=""; var code = ""; //创建验证码 function createCode() { code = ""; //设置验证码的个数为4个 var codeLength = 4; //设置验证码中科选取的数值 var random = [0,1,2,3,4,5,6,7,8,9,\'A\',\'B\',\'C\',\'D\',\'E\',\'F\',\'G\',\'H\',\'I\',\'J\',\'K\',\'L\',\'M\',\'N\',\'O\',\'P\',\'Q\',\'R\', \'S\',\'T\',\'U\',\'V\',\'W\',\'X\',\'Y\',\'Z\']; //random一共36个字符 for( var i =0 ; i<codeLength ; i++) //在random中随机去4个值出来 { //使用random() 方法可返回介于 0 ~ 1 之间的一个随机数。round() 方法可把一个数字舍入为最接近的整数。 var j =Math.round(Math.random()*36) //随机生成下标 code+=random[j]; } //把code随机生成的验证码放入超链接当中; codes.innerHTML = code; } //获取输入框内的值 input.onchange = function (ev) { inputext = input.value.trim().toUpperCase(); //console.log(inputext); } //结果校验 判断输入的字符和随机生成的验证码 function validate() { //获取输入的内容，如果输入为空，弹出警告 if(inputext) { //检查是否相等 if(inputext == code) { window.open(\'http://www.baidu.com\',\'_self\'); } else { //清空输入框 input.innerHTML = ""; alert("验证码不正确，请重新输入"); //验证码在随机生成 createCode(); } } else{ alert("请输入验证码"); } } </script> </body> </html>
以上是关于JS验证码的主要内容，如果未能解决你的问题，请参考以下文章