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

更新時(shí)間：2022年05月24日 10:39:23 作者：Funkingka

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

廢話不多說(shuō)，直接上圖看效果

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

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

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

二、核心代碼

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

html的代碼：

<template>
?? ?<view>
?? ??? ?<form @submit="formSubmit">
? ? ?? ?<view class="down">
?? ??? ??? ?<view>驗(yàn)證碼：</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:"請(qǐng)輸入驗(yàn)證碼",
?? ??? ??? ??? ??? ??? ?icon:"none"
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
? ? ? ? ? ? ? ? //將輸入的驗(yàn)證碼和生成的驗(yàn)證碼都轉(zhuǎn)為全大寫字母，然后再比較是否相等
? ? ? ? ? ? ? ? else if(e.detail.value.code.toUpperCase()==this.code.toUpperCase()){
?? ??? ??? ??? ??? ?console.log("驗(yàn)證碼輸入正確")
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?changeCode(e){
?? ??? ??? ??? ? ? ?var code;
?? ??? ??? ??? ? ? ?//首先默認(rèn)code為空字符串
?? ??? ??? ??? ? ? ?code = '';
?? ??? ??? ??? ? ? ?//設(shè)置長(zhǎng)度，這里看需求
?? ??? ??? ??? ? ? ?var codeLength = 4;
?? ??? ??? ??? ? ? ?//設(shè)置隨機(jī)字符
?? ??? ??? ??? ? ? ?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');
?? ??? ??? ??? ? ? ?//循環(huán)codeLength 我設(shè)置的4就是循環(huán)4次
?? ??? ??? ??? ? ? ?for (var i = 0; i < codeLength; i++) {
?? ??? ??? ??? ? ? ? ?//設(shè)置隨機(jī)數(shù)范圍,這設(shè)置為0 ~ 62（10+26+26）
?? ??? ??? ??? ??? ? ?var index = Math.floor(Math.random() * 62);
?? ??? ??? ??? ? ? ? ?//字符串拼接 將每次隨機(jī)的字符 進(jìn)行拼接
?? ??? ??? ??? ? ? ? ?code += random[index];
?? ??? ??? ??? ? ? ?}
?? ??? ??? ??? ??? ?this.code=code;
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad() {
?? ??? ??? ?this.changeCode();
?? ??? ?}
?? ?}
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Javascript writable特性介紹
這篇文章主要介紹了Javascript writable特性介紹,本文用淺顯易懂的語(yǔ)言講解了writable的特性,需要的朋友可以參考下
2015-02-02
用戶代理字符串userAgent可實(shí)現(xiàn)的四個(gè)識(shí)別
用戶代理字符串:navigator.userAgent ，本文給大家分享用戶代理字符串userAgent可實(shí)現(xiàn)的四個(gè)識(shí)別，需要的朋友可以參考下
2015-09-09
原生js實(shí)現(xiàn)鍵盤控制div移動(dòng)且解決停頓問(wèn)題
這篇文章主要給大家介紹了如何利用原生js實(shí)現(xiàn)鍵盤控制div移動(dòng)，并且解決在移動(dòng)過(guò)程中的停頓問(wèn)題，文中給出了詳細(xì)的示例代碼，相信對(duì)大家的理解和學(xué)習(xí)很有幫助，下面跟著小編一起來(lái)看看吧。
2016-12-12
javascript制作坦克大戰(zhàn)全紀(jì)錄（1）
本文寫作的目的是鞏固一下自己最近學(xué)習(xí)的js知識(shí), 這個(gè)教程適合熟悉js基本語(yǔ)法和面向?qū)ο笳Z(yǔ)法的小伙伴學(xué)習(xí)。由于自己也是剛學(xué)js不久，所以難免出現(xiàn)錯(cuò)誤。如果發(fā)現(xiàn)希望給予指正。
2014-11-11
fmt:formatDate的輸出格式詳解
本篇文章主要是對(duì)fmt:formatDate的輸出格式進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)兩個(gè)頁(yè)面?zhèn)髦档姆椒?結(jié)合實(shí)例形式分析了微信小程序URL跳轉(zhuǎn)及頁(yè)面?zhèn)髦迪嚓P(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12