本文介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼，分享給大家，具體如下：
為東明等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及東明網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、東明網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
樣式自調(diào)，最終效果如圖：
實(shí)現(xiàn)效果：
點(diǎn)擊右邊input框會(huì)自動(dòng)切換，如果輸入的值與字不同，則清空換一串隨機(jī)數(shù)
HTML
請(qǐng)輸入驗(yàn)證碼。 登錄
JS
重慶分公司
重慶分公司
// 圖片驗(yàn)證碼
createCode(){
code = "";
var codeLength = 4;//驗(yàn)證碼的長(zhǎng)度
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//隨機(jī)數(shù)
for(var i = 0; i < codeLength; i++) {
//循環(huán)操作
var index = Math.floor(Math.random()*36);//取得隨機(jī)數(shù)的索引（0~35）
code += random[index];//根據(jù)索引取得隨機(jī)數(shù)加到code上
}
this.checkCode = code;//把code值賦給驗(yàn)證碼
},
// 失焦驗(yàn)證圖和密碼
checkLpicma(){
this.picLyanzhengma.toUpperCase();//取得輸入的驗(yàn)證碼并轉(zhuǎn)化為大寫
if(this.picLyanzhengma == '') {
//代碼是直接復(fù)制項(xiàng)目?jī)?nèi)容，這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來(lái)實(shí)現(xiàn)提示語(yǔ)效果，很簡(jiǎn)單，我懶，就不改了 ~
$(".login_content1 span:eq(2)").text("請(qǐng)輸入驗(yàn)證碼")
$(".login_content1 span:eq(2)").removeClass("disappear");
}else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) {
//若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時(shí)
console.log( this.picLyanzhengma.toUpperCase())
//代碼是直接復(fù)制項(xiàng)目?jī)?nèi)容，這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來(lái)實(shí)現(xiàn)提示語(yǔ)效果，很簡(jiǎn)單，我懶，就不改了 ~
$(".login_content1 span:eq(2)").text("驗(yàn)證碼不正確")
$(".login_content1 span:eq(2)").removeClass("disappear");
this.createCode();//刷新驗(yàn)證碼
this.picLyanzhengma = '';
}else {
//輸入正確時(shí)
//代碼是直接復(fù)制項(xiàng)目?jī)?nèi)容，這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來(lái)實(shí)現(xiàn)提示語(yǔ)效果，很簡(jiǎn)單，我懶，就不改了 ~
$(".login_content1 span:eq(2)").addClass("disappear");
$(".login_content1 span:eq(2)").text("請(qǐng)輸入驗(yàn)證碼")
return true;
}
}
友情提示：本文直接從項(xiàng)目拿來(lái)供大家思路參考，驗(yàn)證提示那塊大家可根據(jù)自己情況做更改。懶得改的可以去我github拿demo。
demo已放到鄙人github，也可自?。篽ttps://github.com/JOSIE1988/JS-Random-authentication-code
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
