js 前端验证码

来源：互联网发布：数据分析师证书甲级编辑：程序博客网时间：2024/06/15 21:53
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />    <script src="http://zeptojs.com/zepto.min.js"></script>    <title>手机测试页</title>     <style type="text/css">          #code{              font-family:Arial;              font-style:italic;              font-weight:bold;              border:0;              letter-spacing:2px;              color:blue;          }      </style>  </head><body>    <div>          <input type = "text" id = "input"/>          <input type = "button" id="code" onclick="createCode()"/>          <input type = "button" value = "验证" onclick = "validate()"/>      </div>    <script type="text/javascript">          var code ; //在全局定义验证码           //产生验证码          window.onload = function createCode(){               code = "";                var codeLength = 4;//验证码的长度               var checkCode = document.getElementById("code");                var random = new Array(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');//随机数               for(var i = 0; i < codeLength; i++) {//循环操作                  var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）                  code += random[index];//根据索引取得随机数加到code上              }              checkCode.value = code;//把code值赋给验证码        }          //校验验证码          function validate(){              var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写                    if(inputCode.length <= 0) { //若输入的验证码长度为0                  alert("请输入验证码！"); //则弹出请输入验证码              }                     else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时                  alert("验证码输入错误！@_@"); //则弹出验证码输入错误                  createCode();//刷新验证码                  document.getElementById("input").value = "";//清空文本框              }                     else { //输入正确时                  alert("^-^"); //弹出^-^              }                     }      </script></body></html>
阅读全文
0 0