js生成驗證碼並直接在前端判斷
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定義驗證碼 var code2; //在全局 定義驗證碼 function createCode() { code = ""; var checkCode = document.getElementById("checkCode"); function RndNum(n) { var rnd = ""; for (var i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10); return rnd; } var num = RndNum(2); var num2 = RndNum(2); code = num + "+" + num2 + "="; code2 = parseInt(num) + parseInt(num2) if (checkCode) { checkCode.className = "code"; checkCode.value = code; } } </script> <script type="text/javascript"> $(document).ready(function () { $("#input1").blur(function () { var inputCode = document.getElementById("input1").value; if (inputCode.length <= 0) { alert("請輸入驗證碼！"); } else if (inputCode != code2) { alert("驗證碼輸入錯誤！"); createCode(); //刷新驗證碼 } else { alert("^-^ OK"); } }); }) </script>HTML:
? 1 2 3 4 <form action="#"> <input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px;background: #660099"/><br /> </form>css:
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style type="text/css"> .code { font-family: Arial; font-style: italic; color: Red; border: 0; padding: 2px 3px; letter-spacing: 3px; font-weight: bolder; } .unchanged { border: 0; } </style>以上所述就是本文的全部內容了，希望大家能夠喜歡。