验证码

Posted 2021-06-15 。往心。

Css（在验证码框背景设置成模糊底色照片-code.jpg）:

.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:1;
}

 

javascript(生成随机字母)

var code ; //在全局 定义验证码
var True="rsfdsafasdfsdfdasfasdf";
function Check()
{
var checkCode = document.getElementById("checkCode").value;
var codeCheck = document.getElementById("codeCheck").value;
if(codeCheck !=checkCode)
{
alert("验证码输入不正确！")
}
}
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;
}

}

 

html（form表单）

 

<form action="#" method="post" onsubmit="return Check()">
<label class="col-md-3 control-label" for="checkCode">验证码</label>
<input type="text" name="codeCheck" class="form-control"
id="codeCheck" placeholder="请点击右侧方框获取验证码">
<input type="text" onclick="createCode()" readOnly="true" id="checkCode" class="unchanged" style="width: 80px" /><br>
<input type="submit" value="提交">
</form>