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-12
Javascript數(shù)組及類(lèi)數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類(lèi)數(shù)組相關(guān)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JS Excel讀取和寫(xiě)入操作(模板操作)實(shí)現(xiàn)代碼
前一段時(shí)間一直在做報(bào)表,所以肯定會(huì)用到Excel的操作,但是在網(wǎng)上查閱資料有關(guān)JS操作excel較少,有的話(huà),也都是老生常談或很零碎的一些東西。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-07
javascript數(shù)組遍歷的方法實(shí)例分析
這篇文章主要介紹了javascript數(shù)組遍歷的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組遍歷及相關(guān)的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下2016-09-09
JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12

