jQuery验证带有图片的验证码问题

最新推荐文章于 2022-07-04 17:47:19 发布

程序员阿卢

最新推荐文章于 2022-07-04 17:47:19 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： javascript html jquery 验证码

本文链接：https://blog.youkuaiyun.com/ljq54/article/details/39011969

学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript生成随机验证码的方法。通过定义一个包含数字和字母的数组，每次请求时生成六个随机字符作为验证码并显示在页面上。用户需要正确输入验证码才能通过验证。

<html xmlns=" http://www.w3.org/1999/xhtml" >  

<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 = 6;//验证码的长度   

       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("^-^ OK");   

       }   

       }   

    </script>  

</head>  

<body onload="createCode()" >  

<form  action="#">

  <input  type="text"   id="input1" />

<input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />  

    <input id="Button1"  onclick="validate();" type="button" value="确定" />    

</form>  

</body>  

<html></PRE>