微信小程序实例：实现随机验证码（附代码）-小程序开发-PHP中文网

微信小程序实例：实现随机验证码（附代码）

不言

发布： 2018-08-16 18:03:08

原创

8625 人浏览过

本篇文章给大家带来的内容是关于微信小程序实例：实现随机验证码（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

小程序上经常会有一些注册申请页面需要用到随机验证码。具体实现方法不多说直接上代码

   <view class=&#39;yanzhengma&#39;>
        <text class=&#39;left&#39;>{{code}}</text>
        <text class=&#39;right&#39; bindtap=&#39;huanyizhang&#39;>换一张</text>
    </view>

登录后复制

.yanzhengma {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yanzhengma .left {
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    border: 0;
    letter-spacing: 3px;
    font-size: 18px;
    background-color: #ccc;
    padding: 10rpx;
    margin-right: 20rpx;
    color: blue;
}

登录后复制

Page({

    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
    //刚进入页面随机先获取一个
        this.createCode()

    },
    huanyizhang(){
        this.createCode()
    },
    createCode() {
        var code;
        //首先默认code为空字符串
        code = &#39;&#39;;
        //设置长度，这里看需求，我这里设置了4
        var codeLength = 4;
        //设置随机字符
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, &#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;, &#39;O&#39;, &#39;P&#39;, &#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;, &#39;W&#39;, &#39;X&#39;, &#39;Y&#39;, &#39;Z&#39;);
        //循环codeLength 我设置的4就是循环4次
        for (var i = 0; i < codeLength; i++) {
            //设置随机数范围,这设置为0 ~ 36
            var index = Math.floor(Math.random() * 36);
            //字符串拼接 将每次随机的字符 进行拼接
            code += random[index];
        }
        //将拼接好的字符串赋值给展示的code
        this.setData({
            code: code
        })
    },




})

登录后复制