微信小程序随机验证码
Funkingka 人气:0废话不多说，直接上图看效果
一、实现功能
1、点击灰色底的验证码图片可以更换一张验证码
2、验证输入的验证码是否正确，并且输入小大写英文都可以、
二、核心代码
注意：我是用uni-app框架写的，用原生写的朋友自行修改一下写法哈
html的代码：
<template>
<view>
<form @submit="formSubmit">
<view class="down">
<view>验证码：</view>
<input class="down_input" name="code"></input>
<text class="true_code" @tap="changeCode">{[code]}</text>
</view>
<button class="btn" form-type="submit">提交</button>
</form>
</view>
</template>样式的代码：
<style>
.down{
width: 90%;
margin: 0 auto;
height: 50rpx;
display: flex;
flex-direction: row;
margin-top: 20rpx;
}
.down_input{
width: 110rpx;
height: 50rpx;
line-height: 50rpx;
border: 1px solid #CCCCCC;
border-radius: 6px;
padding-left: 20rpx;
}
.btn{
width: 300rpx;
height: 70rpx;
line-height: 70rpx;
margin:0 auto;
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>
export default {
data() {
return {
code:""
}
},
methods: {
formSubmit(e){
if(e.detail.value.code=""){
uni.showToast({
title:"请输入验证码",
icon:"none"
})
}
//将输入的验证码和生成的验证码都转为全大写字母，然后再比较是否相等
else if(e.detail.value.code.toUpperCase()==this.code.toUpperCase()){
console.log("验证码输入正确")
}
},
changeCode(e){
var code;
//首先默认code为空字符串
code = '';
//设置长度，这里看需求
var codeLength = 4;
//设置随机字符
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',
'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 (var i = 0; i < codeLength; i++) {
//设置随机数范围,这设置为0 ~ 62（10+26+26）
var index = Math.floor(Math.random() * 62);
//字符串拼接 将每次随机的字符 进行拼接
code += random[index];
}
this.code=code;
}
},
onLoad() {
this.changeCode();
}
}
</script>加载全部内容