JQuery 实现随机生成数字+字母验证码-CUTEPIG BLOG-可爱猪博客

文章目录[隐藏]

效果图

效果图

<pre class="inline:true class:language-html decode:1 " >&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;!--验证码--&gt;
   &lt;script language="javascript" type="text/javascript"&gt;
     
            var code;
            function createCode() {  //函数体
                code = "";
                var codeLength = 5; //验证码的长度
                var checkCode = document.getElementById("checkCode");
                var codeChars = 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',
                '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 &lt; codeLength; i++)
                {
                    var charNum = Math.floor(Math.random() * 52);//设置随机产生
                    code += codeChars[charNum];
                }
                if (checkCode)
                {
                    checkCode.className = "code";
                    checkCode.innerHTML = code;
                }
            }        
         &lt;/script&gt;
     
&lt;/head&gt;
&lt;style&gt;
    /*验证码*/
.code
    {
          background-color: silver;
            font-family:Arial; /*设置字体*/
            font-style:initial;
             color:brown;
             font-size:20px;
             border:0;
              padding:2px 3px;
             letter-spacing:3px;
             font-weight:bolder;            
              
             width:81px;
             height:23px;      
             margin-left: 120px;
             margin-top: -35px;
 
    }
    a
    {
        text-decoration:none;
        font-size:12px;
        color:#288bc4;
        }
    a:hover
    {
       text-decoration:underline;
        }
       .yz{
         position: absolute;
          margin-left: 220px;
          margin-top:-10px;
        }
         
&lt;/style&gt;
&lt;body onload="createCode()"&gt;&lt;!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 --&gt;
    &lt;p&gt;
        &lt;label&gt;      验证码：&lt;/label&gt; 
         &lt;div class="code" id="checkCode" onclick="createCode()" &gt;&lt;/div&gt;&lt;a class="yz"  href="#" onclick="createCode()"&gt;看不清换一张&lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;请输入验证码：&lt;/label&gt;&lt;input id="YZ" name="yz" width="30px;"&gt;
      &lt;/p&gt;
      &lt;input class="btttom"  type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/&gt;
       
&lt;/body&gt;
&lt;!--验证--&gt;
&lt;script&gt;
  function GetDom(){
    if(document.getElementById("YZ").value==""){
            alert("验证码不能为空！");
            createCode();//输错一次或提交一次都将会刷新一次验证码
            return false; //结束本次会话
          }else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写
            alert("您输入的验证码有误，请重新输入！！");
            createCode();//读取文件
          }                  
      else{
            alert("ok");
        }
      
  } 
&lt;/script&gt;
&lt;/html&gt;

<head>

<title>Document</title>

var code;

function createCode() { //函数体

code = "";

var codeLength = 5; //验证码的长度

var checkCode = document.getElementById("checkCode");

var codeChars = 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',

'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 charNum = Math.floor(Math.random() * 52);//设置随机产生

code += codeChars[charNum];

}

if (checkCode)

{

checkCode.className = "code";

checkCode.innerHTML = code;

}

</script>

</head>

<style>

/*验证码*/

.code

{

background-color: silver;

font-family:Arial; /*设置字体*/

font-style:initial;

color:brown;

font-size:20px;

border:0;

padding:2px 3px;

letter-spacing:3px;

font-weight:bolder;

width:81px;

height:23px;

margin-left: 120px;

margin-top: -35px;

}

{

text-decoration:none;

font-size:12px;

color:#288bc4;

}

a:hover

{

text-decoration:underline;

}

.yz{

position: absolute;

margin-left: 220px;

margin-top:-10px;

}

</style>

<p>

<div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz" href="#" onclick="createCode()">看不清换一张</a>

</p>

<p>

<label>请输入验证码：</label><input id="YZ" name="yz" width="30px;">

</p>

</body>

function GetDom(){

if(document.getElementById("YZ").value==""){

alert("验证码不能为空！");

createCode();//输错一次或提交一次都将会刷新一次验证码

return false; //结束本次会话

}else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写

alert("您输入的验证码有误，请重新输入！！");

createCode();//读取文件

}

else{

alert("ok");

}

</script>

</html>

Visits: 5

JQuery 实现随机生成数字+字母验证码

效果图

发表回复取消回复

微信公众号

效果图

发表回复 取消回复

发表回复取消回复