js生成驗(yàn)證碼并直接在前端判斷
js生成驗(yàn)證碼并直接在前端判斷
<script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定義驗(yàn)證碼 var code2; //在全局 定義驗(yàn)證碼 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("請(qǐng)輸入驗(yàn)證碼!"); } else if (inputCode != code2) { alert("驗(yàn)證碼輸入錯(cuò)誤!"); createCode(); //刷新驗(yàn)證碼 } else { alert("^-^ OK"); } }); }) </script>
HTML:
<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:
<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>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Jsp生成頁(yè)面驗(yàn)證碼的方法[附代碼]
- JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
- js實(shí)現(xiàn)簡(jiǎn)單的驗(yàn)證碼
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
- JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式
- js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)(前端部分)
- JavaScript實(shí)現(xiàn)驗(yàn)證碼案例
相關(guān)文章
JavaScript中的console.assert()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.assert()函數(shù)介紹,assert()函數(shù)是一個(gè)調(diào)試中經(jīng)常使用的斷言工具函數(shù),需要的朋友可以參考下2014-12-12Javascript數(shù)組及類(lèi)數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類(lèi)數(shù)組相關(guān)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10JS Excel讀取和寫(xiě)入操作(模板操作)實(shí)現(xiàn)代碼
前一段時(shí)間一直在做報(bào)表,所以肯定會(huì)用到Excel的操作,但是在網(wǎng)上查閱資料有關(guān)JS操作excel較少,有的話,也都是老生常談或很零碎的一些東西。2010-04-04基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼分享
無(wú)縫滾動(dòng)效果在各大網(wǎng)站都有這樣的需求,應(yīng)用非常廣泛,下面小編給大家分享基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看下吧2016-06-06一個(gè)js拖拽的效果類(lèi)和dom-drag.js淺析
最近完成了一個(gè)Drag類(lèi),可以實(shí)現(xiàn)指定對(duì)象的拖拽效果。2010-07-07javascript數(shù)組遍歷的方法實(shí)例分析
這篇文章主要介紹了javascript數(shù)組遍歷的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組遍歷及相關(guān)的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下2016-09-09JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12