网页自动生成验证码并判断正确

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>无标题页</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];
       }
       if(checkCode)
       {
         checkCode.className="code";
         checkCode.value = code;
       }
     }
      function validate ()
     {
         var inputCode = document.getElementById("input1").value;
         if(inputCode.length <=0)
         {
             document.getElementById("yzm").innerText="请输入验证码！";
             return false;
         }
         else if(inputCode != code )
         {
          document.getElementById("yzm").innerText="验证码输入错误！";
            createCode();//刷新验证码
            return false;
         }
         else
         {
          return true;
         }
       }
    </script>
</head>
<body onload="createCode()">
<form  action="#">
    <input  type="text"   id="input1" placeholder="此项必填哦"/>
    <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  />
    <input id="Button1"  onclick="console.log(validate())" type="button" value="确定" />
    <label id="yzm" style="color:red;margin-left:15em"></label>
</form>
</body>
</html>

 

posted @ 2022-04-02 22:06  慢漫曼蔓  阅读(38)  评论(0)    收藏  举报