js生成验证码并直接在前端判断
js生成验证码并直接在前端判断
<scripttype="text/javascript"src="img/jquery-1.5.1.min.js"></script>
<scriptlanguage="javascript"type="text/javascript">
varcode;//在全局定义验证码
varcode2;//在全局定义验证码
functioncreateCode(){
code="";
varcheckCode=document.getElementById("checkCode");
functionRndNum(n){
varrnd="";
for(vari=0;i<n;i++)
rnd+=Math.floor(Math.random()*10);
returnrnd;
}
varnum=RndNum(2);
varnum2=RndNum(2);
code=num+"+"+num2+"=";
code2=parseInt(num)+parseInt(num2)
if(checkCode){
checkCode.className="code";
checkCode.value=code;
}
}
</script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#input1").blur(function(){
varinputCode=document.getElementById("input1").value;
if(inputCode.length<=0){
alert("请输入验证码！");
}
elseif(inputCode!=code2){
alert("验证码输入错误！");
createCode();//刷新验证码
}
else{
alert("^-^OK");
}
});
})
</script>
HTML:
<formaction="#"> <inputtype="text"id="input1"/> <inputtype="text"onclick="createCode()"readonly="readonly"id="checkCode"class="unchanged"style="width:80px;background:#660099"/><br/> </form>
css:
<styletype="text/css">
.code
{
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px3px;
letter-spacing:3px;
font-weight:bolder;
}
.unchanged
{
border:0;
}
</style>
以上所述就是本文的全部内容了，希望大家能够喜欢。