js生成驗(yàn)證碼并直接在前端判斷
更新時(shí)間:2015年05月15日 11:18:07 投稿:hebedich
眾所周知,js是客戶端的,那么把驗(yàn)證都做在客戶端有意義嗎?還是必須從服務(wù)器生成的驗(yàn)證碼安全???前端生成的驗(yàn)證碼安全嗎?x下面我們來看個(gè)例子
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("請輸入驗(yàn)證碼!");
}
else if (inputCode != code2) {
alert("驗(yàn)證碼輸入錯誤!");
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>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:
- Jsp生成頁面驗(yàn)證碼的方法[附代碼]
- JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
- js實(shí)現(xià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)滑動拼圖驗(yàn)證碼功能
- JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)登錄注冊框手機(jī)號和驗(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ù)組及類數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類數(shù)組相關(guān)原理詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JS Excel讀取和寫入操作(模板操作)實(shí)現(xiàn)代碼
前一段時(shí)間一直在做報(bào)表,所以肯定會用到Excel的操作,但是在網(wǎng)上查閱資料有關(guān)JS操作excel較少,有的話,也都是老生常談或很零碎的一些東西。2010-04-04
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í)間對象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12

