微信小程序實現(xiàn)隨機驗證碼

第微信小程序實現(xiàn)隨機驗證碼本文實例為大家分享了微信小程序實現(xiàn)隨機驗證碼的具體代碼，供大家參考，具體內(nèi)容如下

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

一、實現(xiàn)功能

1、點擊灰色底的驗證碼圖片可以更換一張驗證碼

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

二、核心代碼

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

html的代碼：

template

view

form@submit="formSubmit"

view

view驗證碼：/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:"請輸入驗證碼",

icon:"none"

})

}

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

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

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

}

},

changeCode(e){

varcode;

//首先默認code為空字符串

code='';

//設置長度，這里看需求

varcodeLength=4;

//設置隨機字符

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我設置的4就是循環(huán)4次

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

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

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

//字符串拼接將每次隨機的字符進行拼接

code+=random[index];

}