JS實現偽驗證碼的幾種方式
阿新 • • 發佈：2019-02-14
提示：不推薦使用以下方式來實現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" onkeydown="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：
不要忘記新增一個存放計算結果的Hidden文字域：<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>
<input type="hidden" name="hiddencode" id="hiddencode"/>
登入驗證時：
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 onload="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" onclick="validatecode();" src="bt1n.jpg" width="87px" height="48px">
</td>
</td>
</tr>
</table>
</div>
</div>
</body>
</form>
</html>