Html:
<form id="form1" runat="server" οnsubmit="validateCode()">
<div>
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td>驗證碼:</td><td><input style="float:left;" type="text" id="inputCode" /></td><td>請輸入驗證碼</td>
</tr>
<tr><td></td><td><input id="Button1" οnclick="validateCode();" type="button" value="確定" /></td><td></td>
</tr>
<tr>
<td></td><td> <div class="code" id="checkCode" οnclick="createCode()" ></div></td>
<td><a href="#" οnclick="createCode()">換一張</a></td>
</tr>
</table>
</div>
</form>
Css:
<style>
.code
{
background-color: #1cbb9b;
font-family:Arial;
font-style:italic;
color:blue;
font-size:30px;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
float:left;
cursor:pointer;
width:150px;
height:60px;
line-height:60px;
text-align:center;
vertical-align:middle;
}
a
{
text-decoration:none;
font-size:12px;
color:#288bc4;
}
a:hover
{
text-decoration:underline;
}
</style>
Javascript:
<script language="javascript" type="text/javascript">
var code;
function createCode() {
code = "";
var codeLength = 6; //驗證碼的長度
var checkCode = document.getElementById("checkCode");
var codeChars = 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',
'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 charNum = Math.floor(Math.random() * 61);
code += codeChars[charNum];
}
if (checkCode)
{
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
function validateCode()
{
var inputCode = document.getElementById("inputCode").value;
if (inputCode.length <= 0)
{
alert("請輸入驗證碼!");
}
else if (inputCode.toUpperCase() != code.toUpperCase())
{
alert("驗證碼輸入有誤!");
createCode();
}
else
{
alert("驗證碼正確!");
}
}
</script>