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

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

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

一、实现功能

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。