JS实现伪验证码的几种方式

68 阅读 0 评论 45 点赞

我是靠谱客的博主健康导师，最近开发中收集的这篇文章主要介绍JS实现伪验证码的几种方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

提示：不推荐使用以下方式来实现web开发中的验证码功能，因为这几种方式

使用的是前台验证，没有在后台执行操作时进行比对，因此无法保证网站入口

的强制破解操作。不能很好的保证网站的安全性！

1： ? + ? = ? 的方式

效果如图：

HTML Code：

<td height="35" colspan="2" class="top_hui_text" valign="middle">
<input class="wenbenkuang" name="verifycode" id="verifycode" type="text"
value="" maxLength=2 size="8"
οnkeydοwn="keyLogin();">
<span id="showspan" name="showspan" style="border:5px;font-weight:bold;background:#aeb6c9"></span>
<a class="kanbuqing" href="javascript:void(0)" onClick="getverifycodeChange();">  换一题 ?</a>
</td>

JS Code：

<script type="text/javascript" language="javascript">
function getverifycode(){
var i = parseInt(10 * Math.random());
var j = parseInt(10 * Math.random());
var k = i + j;
$("#hiddencode").val(k);
$("#showspan").html(" " + i + " + " + j + " = ");
}
function getverifycodeChange(){
var i = parseInt(10 * Math.random());
var j = parseInt(10 * Math.random());
var k = i + j;
$("#hiddencode").val(k);
$("#showspan").html(" " + i + " + " + j + " = ");
$("#verifycode").focus();
}</script>

不要忘记添加一个存放计算结果的Hidden文本域：

登入验证时：

if ($("#verifycode").val().trim() == "" || $("#verifycode").val().trim() != $("#hiddencode").val().trim()) {
$("#tip").html("提示：验证码计算有误！");
$("#verifycode").focus();
return false;
}

2：？？？？

如图所示：

Code：

<html>
</head>
<script type="text/javascript">
var	code;
function createCode() {
code = new Array();
var codeLength = 4;
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D',
'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
for ( var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 32);
code += selectChar[charIndex];
}
if (code.length != codeLength) {
createCode();
}
checkCode.value = code;
};
function validatecode(){
var verifyCode = document.getElementById("verifyCode").value.toUpperCase();
var checkCode = document.getElementById("checkCode").value;
if(verifyCode==null|verifyCode!=checkCode){
alert("验证码输入错误！");
document.getElementById("verifyCode").focus();
return true;
}else{
document.getElementById("form1").submit();
}
}
</script>
<body οnlοad="createCode()">
<form id="form1" action="sdafd.do" method="post" onSubmit="return false" >
<div class="loginbox">
<div class="logincnt">
<table class="logtlb">
<tr>
<td class="txtRight">验 证 码</td>
<td width="0" class="txtLeft"><input name="verifyCode"
id="verifyCode" class="loginpyzm" type="text">
</td>
<td width="0" class="txtLeft">
<input type="button"
id="checkCode" class="right chs" style="width:60px" value="" onClick="createCode()" />
</td>
</tr>
<tr>
<td> </td>
<td width="0" class="txtLeft"><input type="image" οnclick="validatecode();" src="bt1n.jpg" width="87px" height="48px">
</td>
</td>
</tr>
</table>
</div>
</div>
</body>
</form>
</html>