<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<META charset=gb2312>
<head>
<title>JS生成驗證碼</title>
<style>
.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: 0;
}
</style>
<script>
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;
if (inputCode.length == 0) {
alert("請輸入驗證碼!");
} else if (inputCode.toLowerCase() != code.toLowerCase()) {
alert("驗證碼輸入錯誤!");
createCode(); //刷新驗證碼
} else {
alert("^-^ OK");
}
}
</script>
</head>
<body onload="createCode()">
<form action="#">
<input type="text" id="input1" />
<input type="text" onclick="create()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" />
<br />
<input id="Button1" onclick="validate();" type="button" value="確定" />
</form>
</body>
</html>
此僅為本人剛剛接觸java時的隨身記錄的樣式
不能作為主要參考