微信小程序實現隨機驗證碼
本文實例為大傢分享瞭微信小程序實現隨機驗證碼的具體代碼，供大傢參考，具體內容如下
廢話不多說，直接上圖看效果
一、實現功能
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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。