验证码的实现

最新推荐文章于 2022-08-02 01:46:34 发布

向太阳天

最新推荐文章于 2022-08-02 01:46:34 发布

阅读量252

点赞数

文章标签：验证码

本文链接：https://blog.csdn.net/qq_29220231/article/details/49534619

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>JS生成验证码</title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
     }
.unchanged {
   border: 0;
    }
          </style>
         <script language="javascript" type="text/javascript">
     var code; //在全局定义验证
     function createCode()
     {
     code = "";

  var codeLength = 4;//验证码的长度
      var checkCode = document.getElementById("checkCode");
   var selectChar = 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 charIndex = Math.floor(Math.random() * 36);
     code += selectChar[charIndex];   }
       //alert(code);
      if (checkCode) {
    checkCode.className = "code";
   checkCode.value = code;   } }
   function validate() {
  var inputCode = document.getElementById("input1").value;
    if (inputCode.length <= 0) {
    alert("请输入验证码！");
    } else if (inputCode != code) {
     alert("验证码输入错误！");
     createCode();//刷新验证码
     } else {   alert("成功！");
     }
     } </script>
                    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body οnlοad="createCode()">
              <form action="#">
             <input type="text" id="input1" />
                <input type="text" οnclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
                   <input id="Button1" οnclick="validate();" type="button" value="确定" />
                   </form>
                    </body>
                    </html>