標籤：
1、html
<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>
2、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; }
3、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; } }
簡單的驗證碼就實現了
js驗證碼
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
