首頁 > 開發者 > JavaScript
基礎版
從我們平時上網的經驗來看,驗證碼一般是四位,由數字和字母組成。
那麼接下來樓主將帶領大家一步步用JavaScript做出一個驗證碼指令碼!
先給出成品，方便大家理解：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #securityCode{ background-color: #008000; width:70px; height:30px; font-family: '楷體', serif; font-size: 20px; color:white; } </style> <script language="JavaScript" type="text/javascript"> function createCode(){ var code=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'); var codeNumber; securityCode="";//全域變數,方便後續驗證 for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; } document.getElementById("securityCode").value=securityCode; } function verify(){ var enterCode=document.getElementById("enterCode").value; if(enterCode.toUpperCase()==securityCode){ alert("輸入正確,通過驗證!"); } else{ enterCode.value=""; createCode(); } } </script> <title>Jizhen Tan</title></head><body onLoad="checkCookie()" > <input type="text" id="enterCode"><br/> <input type="button" id="securityCode" onclick="createCode()"> <a href="###" onclick="createCode()">看不清楚</a><br/> <input type="button" style="background-color: #0099FF; font-size: 20px;"value="驗證" onclick="verify()"></body></html>
1.既然是四位驗證碼,我們的思路就要開啟一些了,首先我們需要一個數組來儲存字母和數字。
var code=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');
2.然後我們需要讓它隨機顯示數組中的元素，這裡我們建立一個codeNumber變數來隨機顯示的數字,但我們需要的是四位驗證碼，而現在數組中的元素都是單個的，怎麼辦呢？簡單！我們再建立一個securityCode變數來儲存數組中的元素不就得了。代碼如下：
var codeNumber; securityCode="";//全域變數,方便後續驗證 for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; }
可以看出此時securityNumber變數儲存的就是一個四位隨機驗證碼
3.好了，經過簡單的兩步，我們就得到了四位驗證碼。我們將它放在一個createCode函數中。
function createCode(){ var code=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'); var codeNumber; securityCode="";//全域變數,方便後續驗證 for(var i=0;i<4;i++){ codeNumber=Math.floor(Math.random()*36); securityCode+=code[codeNumber]; } document.getElementById("securityCode").value=securityCode; }
4.接下來我們建立一個驗證機制：
function verify(){ var enterCode=document.getElementById("enterCode").value; if(enterCode.toUpperCase()==securityCode){ alert("輸入正確,通過驗證!"); } else{ enterCode.value=""; createCode(); } }
5.小小修飾下驗證碼：
<style> #securityCode{ background-color: #008000; width:70px; height:30px; font-family: '楷體', serif; font-size: 20px; color:white; } </style>
進階：進一步阻止機器人的進階技巧
接觸的大部分項目中，驗證碼一直都是後台乾的事，這兩天正好有一個頁面需要驗證碼，第時間想著後台實現，但突然轉念一想大部分項目貌似對安全性要求不是很高，又要求有點阻止機器人的技巧，於是就用前端寫了一個驗證碼。並利用CSS3的transform屬性裡的rotate設定旋轉，再隨機弄點幹擾線，最後為了在所有DOM節點的上邊加一層opacity=0的DIV，一個前端驗證碼就出來了。
vCode代碼：
(function(){ var randstr = function(length){ var key = { str : [ 'a','b','c','d','e','f','g','h','i','j','k','l','m', 'o','p','q','r','s','t','x','u','v','y','z','w','n', '0','1','2','3','4','5','6','7','8','9' ], randint : function(n,m){ var c = m-n+1; var num = Math.random() * c + n; return Math.floor(num); }, randStr : function(){ var _this = this; var leng = _this.str.length - 1; var randkey = _this.randint(0, leng); return _this.str[randkey]; }, create : function(len){ var _this = this; var l = len || 10; var str = ''; for(var i = 0 ; i<l ; i++){ str += _this.randStr(); } return str; } }; length = length ? length : 10; return key.create(length); }; var randint = function(n,m){ var c = m-n+1; var num = Math.random() * c + n; return Math.floor(num); }; var vCode = function(dom, options){ this.codeDoms = []; this.lineDoms = []; this.initOptions(options); this.dom = dom; this.init(); this.addEvent(); this.update(); this.mask(); }; vCode.prototype.init = function(){ this.dom.style.position = "relative"; this.dom.style.overflow = "hidden"; this.dom.style.cursor = "pointer"; this.dom.title = "點擊更換驗證碼"; this.dom.style.background = this.options.bgColor; this.w = this.dom.clientWidth; this.h = this.dom.clientHeight; this.uW = this.w / this.options.len; }; vCode.prototype.mask = function(){ var dom = document.createElement("div"); dom.style.cssText = [ "width: 100%", "height: 100%", "left: 0", "top: 0", "position: absolute", "cursor: pointer", "z-index: 9999999" ].join(";"); dom.title = "點擊更換驗證碼"; this.dom.appendChild(dom); }; vCode.prototype.addEvent = function(){ var _this = this; _this.dom.addEventListener("click", function(){ _this.update.call(_this); }); }; vCode.prototype.initOptions = function(options){ var f = function(){ this.len = 4; this.fontSizeMin = 20; this.fontSizeMax = 48; this.colors = [ "green", "red", "blue", "#53da33", "#AA0000", "#FFBB00" ]; this.bgColor = "#FFF"; this.fonts = [ "Times New Roman", "Georgia", "Serif", "sans-serif", "arial", "tahoma", "Hiragino Sans GB" ]; this.lines = 8; this.lineColors = [ "#888888", "#FF7744", "#888800", "#008888" ]; this.lineHeightMin = 1; this.lineHeightMax = 3; this.lineWidthMin = 1; this.lineWidthMax = 60; }; this.options = new f(); if(typeof options === "object"){ for(i in options){ this.options[i] = options[i]; } } }; vCode.prototype.update = function(){ for(var i=0; i<this.codeDoms.length; i++){ this.dom.removeChild(this.codeDoms[i]); } for(var i=0; i<this.lineDoms.length; i++){ this.dom.removeChild(this.lineDoms[i]); } this.createCode(); this.draw(); }; vCode.prototype.createCode = function(){ this.code = randstr(this.options.len); }; vCode.prototype.verify = function(code){ return this.code === code; }; vCode.prototype.draw = function(){ this.codeDoms = []; for(var i=0; i<this.code.length; i++){ this.codeDoms.push(this.drawCode(this.code[i], i)); } this.drawLines(); }; vCode.prototype.drawCode = function(code, index){ var dom = document.createElement("span"); dom.style.cssText = [ "font-size:" + randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px", "color:" + this.options.colors[randint(0, this.options.colors.length - 1)], "position: absolute", "left:" + randint(this.uW * index, this.uW * index + this.uW - 10) + "px", "top:" + randint(0, this.h - 30) + "px", "transform:rotate(" + randint(-30, 30) + "deg)", "-ms-transform:rotate(" + randint(-30, 30) + "deg)", "-moz-transform:rotate(" + randint(-30, 30) + "deg)", "-webkit-transform:rotate(" + randint(-30, 30) + "deg)", "-o-transform:rotate(" + randint(-30, 30) + "deg)", "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)], "font-weight:" + randint(400, 900) ].join(";"); dom.innerHTML = code; this.dom.appendChild(dom); return dom; }; vCode.prototype.drawLines = function(){ this.lineDoms = []; for(var i=0; i<this.options.lines; i++){ var dom = document.createElement("div"); dom.style.cssText = [ "position: absolute", "opacity: " + randint(3, 8) / 10, "width:" + randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px", "height:" + randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px", "background: " + this.options.lineColors[randint(0, this.options.lineColors.length - 1)], "left:" + randint(0, this.w - 20) + "px", "top:" + randint(0, this.h) + "px", "transform:rotate(" + randint(-30, 30) + "deg)", "-ms-transform:rotate(" + randint(-30, 30) + "deg)", "-moz-transform:rotate(" + randint(-30, 30) + "deg)", "-webkit-transform:rotate(" + randint(-30, 30) + "deg)", "-o-transform:rotate(" + randint(-30, 30) + "deg)", "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)], "font-weight:" + randint(400, 900) ].join(";"); this.dom.appendChild(dom); this.lineDoms.push(dom); } }; this.vCode = vCode; }).call(this);
用法：
//container 為 驗證碼的DOM節點var code = new vCode(container); // 驗證是否正確// inputCode為使用者輸入的驗證碼code.verify(inputCode); // return true or false
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
