一.js實現驗證碼：
第一步：建一個login.htm，一個code.js文件，一個code.css文件，準備一張圖片code.jpg
第二步：編寫login.htm文件，內容為：
01.<html>
02.<head>
03.<script language = "javascript" src = "code.js"></script>
04.<link rel="stylesheet" type="text/css" href="code.css">
05.</head>
06.<body onload="createCode();">
07.<form>
08. <center>驗證碼：<input type="text" id="input1" />
09.<input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">看不清楚</a>
10.<input id="Button1" onclick="validate();" type="button" value="確定" /></center>
11.</form>
12.</body>
13.</html>
第三步：編寫code.css文件，內容為：
01..code{
02.background-image:url(code.jpg);
03.font-family:Arial;
04.font-style:italic;
05.color:Red;
06.border:0;
07.padding:2px 3px;
08.letter-spacing:3px;
09.font-weight:bolder;
10.}
第四步：編寫code.js文件，內容為：
var code ; //在全局 定義驗證碼
function createCode(){
code = "";
var codeLength = 4;//驗證碼的長度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(1,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','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()*60);
code +=selectChar[charIndex];
}
if(code.length != codeLength){
createCode();
}
checkCode.value = code;
}
function validate () {
var inputCode = document.getElementById("input1").value.toUpperCase();
if(inputCode.length <=0) {
alert("請輸入驗證碼！");
return false;
}
else if(inputCode != code ){
alert("驗證碼輸入錯誤！");
createCode();
return false;
}
else {
alert("輸入正確，輸入的驗證碼為："+inputCode);
return true;
}
}
第五步：把四個文件放到一個文件夾中，運行login.htm文件，顯示結果為：
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
