基于Html+Css+javascript的验证码生成

最新推荐文章于 2023-04-22 18:29:42 发布

寒山-居士

最新推荐文章于 2023-04-22 18:29:42 发布

阅读量4.4k

点赞数 3

分类专栏： JS 文章标签： html javascript css 验证码

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>无标题页</title>
    <style type="text/css">
         .code
        {
             background:lightblue;
             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,'妈','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',
                                 'A','B','C','D','E','F','G','操','I','J','K','L','M','N','O','你','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)
        {
            alert("请输入验证码！");
        }
       else if(inputCode != code )
        {
           alert("验证码输入错误！");
           createCode();//刷新验证码
        }
       else
        {
          alert("^-^ OK");
        }
       }
    </script>
</head>
<body>
     <input  type="text"   οnclick="createCode()" id="input1" />
    <input type="text" readonly  id="checkCode" class="unchanged" style="width: 80px"  /><br />
    <input id="submit"   οnclick="validate();"  type="button" value="确定" /> 
</body>
</html>

可以生成随机的验证码，并可以进行检验

寒山-居士

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于Html+Css+javascript的验证码生成

无标题页 .code { background:lightblue; font-family:Arial; font-style:italic; color:Red; border:0; paddin
复制链接

扫一扫