用JavaScript生成验证码

来源:互联网 发布:淘宝网延时喷剂 编辑:程序博客网 时间:2024/05/20 20:01

验证码的生成与验证
js部分代码

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.toUpperCase(); //取得输入的验证码并转化为大写             if(inputCode.length <=0)             {                 alert("请输入验证码!");             }             else if(inputCode != code )             {                 alert("验证码输入错误!");                 createCode();//刷新验证码             }             else             {                 alert("正确!");            }        }

css部分代码

.code{}{     font-family:Arial;     font-style:italic;     border:0;     padding:2px 3px;     letter-spacing:3px;     font-weight:bolder; } .unchanged{}{     border:0; }#yanzhengma{    position: absolute;    border: 1px red solid;}

H5部分代码

<div id="yanzhengma">    <form action="#">        请输入验证码:        <input type="text" id="input1" />         <input type="text" readonly="readonly" id="checkCode" class="unchanged" style="width: 70px" />        <input id="Button1" onclick="createCode();" type="button" value="点击生成验证码" />        <input id="Buttom2" onclick="validate();" type="button" value="确认" />    </form></div>

这里写图片描述

1 0
原创粉丝点击