微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼

第微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下

廢話不多說，直接上圖看效果

一、實(shí)現(xiàn)功能

1、點(diǎn)擊灰色底的驗(yàn)證碼圖片可以更換一張驗(yàn)證碼

2、驗(yàn)證輸入的驗(yàn)證碼是否正確，并且輸入小大寫英文都可以、

二、核心代碼

注意：我是用uni-app框架寫的，用原生寫的朋友自行修改一下寫法哈

html的代碼：

template

view

form@submit="formSubmit"

view

view驗(yàn)證碼：/view

inputname="code"/input

text@tap="changeCode"{[code]}/text

/view

buttonform-type="submit"提交/button

/form

/view

/template

樣式的代碼：

style

.down{

width:90%;

margin:0auto;

height:50rpx;

display:flex;

flex-direction:row;

margin-top:20rpx;

}

.down_input{

width:110rpx;

height:50rpx;

line-height:50rpx;

border:

1pxsolid#CCCCCC;

border-radius:6px;

padding-left:20rpx;

}

.btn{

width:300rpx;

height:70rpx;

line-height:70rpx;

margin:0auto;

margin-top:50rpx;

color:white;

background:#23EBB9;

}

.true_code{

width:150rpx;

height:52rpx;

line-height:50rpx;

text-align:center;

font-family:Arial;

font-style:italic;

font-weight:bold;

border:0;

letter-spacing:3px;

font-size:18px;

background-color:#ccc;

margin-left:30rpx;

/*

padding:10rpx;*/

margin-right:20rpx;

color:black;

}

/style

js的代碼：

script

exportdefault{

data(){

return{

code:""

}

},

methods:{

formSubmit(e){

if(e.detail.value.code=""){

uni.showToast({

title:"請輸入驗(yàn)證碼",

icon:"none"

})

}

//將輸入的驗(yàn)證碼和生成的驗(yàn)證碼都轉(zhuǎn)為全大寫字母，然后再比較是否相等

elseif(e.detail.value.code.toUpperCase()==this.code.toUpperCase()){

console.log("驗(yàn)證碼輸入正確")

}

},

changeCode(e){

varcode;

//首先默認(rèn)code為空字符串

code='';

//設(shè)置長度，這里看需求

varcodeLength=4;

//設(shè)置隨機(jī)字符

varrandom=newArray(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',

'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');

//循環(huán)codeLength我設(shè)置的4就是循環(huán)4次

for(vari=0;icodeLength;i++){

//設(shè)置隨機(jī)數(shù)范圍,這設(shè)置為0~62（10+26+26）

varindex=Math.floor(Math.random()*62);

//字符串拼接將每次隨機(jī)的字符進(jìn)行拼接

code+=random[index];

}