微信小程序实现随机验证码

第微信小程序实现随机验证码本文实例为大家分享了微信小程序实现随机验证码的具体代码，供大家参考，具体内容如下

废话不多说，直接上图看效果

一、实现功能

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

//循环codeLength我设置的4就是循环4次

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

//设置随机数范围,这设置为0~62（10+26+26）

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

//字符串拼接将每次随机的字符进行拼接

code+=random[index];

}