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

<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>

<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>