驗證碼實現方式-------（js實現驗證碼）：
阿新 • • 發佈：2019-01-30
一.js實現驗證碼：
第一步：建一個login.htm，一個code.js檔案，一個code.css檔案，準備一張圖片code.jpg
第二步：編寫login.htm檔案，內容為：
<html> <head> <script language = "javascript" src = "code.js"></script> <link rel="stylesheet" type="text/css" href="code.css"> </head> <body onload="createCode();"> <form> <center>驗證碼：<input type="text" id="input1" /> <input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">看不清楚</a> <input id="Button1" onclick="validate();" type="button" value="確定" /></center> </form> </body> </html>
第三步：編寫code.css檔案，內容為：
.code{
background-image:url(w1.jpg);
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
第四步：編寫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(); var codeToUp=code.toUpperCase(); if(inputCode.length <=0) { alert("請輸入驗證碼！"); return false; } else if(inputCode != codeToUp ){ alert("驗證碼輸入錯誤！"); createCode(); return false; } else { alert("輸入正確，輸入的驗證碼為："+inputCode); return true; } }
第五步：把四個檔案放到一個資料夾中，執行login.htm檔案，顯示結果為：
