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

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

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

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

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

一、實現(xiàn)功能

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"
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
? ? ? ? ? ? ? ? //將輸入的驗證碼和生成的驗證碼都轉(zhuǎn)為全大寫字母，然后再比較是否相等
? ? ? ? ? ? ? ? else if(e.detail.value.code.toUpperCase()==this.code.toUpperCase()){
?? ??? ??? ??? ??? ?console.log("驗證碼輸入正確")
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?changeCode(e){
?? ??? ??? ??? ? ? ?var code;
?? ??? ??? ??? ? ? ?//首先默認code為空字符串
?? ??? ??? ??? ? ? ?code = '';
?? ??? ??? ??? ? ? ?//設(shè)置長度，這里看需求
?? ??? ??? ??? ? ? ?var codeLength = 4;
?? ??? ??? ??? ? ? ?//設(shè)置隨機字符
?? ??? ??? ??? ? ? ?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è)置隨機數(shù)范圍,這設(shè)置為0 ~ 62（10+26+26）
?? ??? ??? ??? ??? ? ?var index = Math.floor(Math.random() * 62);
?? ??? ??? ??? ? ? ? ?//字符串拼接 將每次隨機的字符 進行拼接
?? ??? ??? ??? ? ? ? ?code += random[index];
?? ??? ??? ??? ? ? ?}
?? ??? ??? ??? ??? ?this.code=code;
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad() {
?? ??? ??? ?this.changeCode();
?? ??? ?}
?? ?}
</script>

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

您可能感興趣的文章:

相關(guān)文章

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