×

微信小程序开发:随机生成验证码

作者:andy0012020.11.12来源:Web前端之家浏览:298评论:0
关键词:js
微信公众号

微信公众号

今天分享下一个微信小程序开发的经验:如何随机生成验证码。我们平时在开发表单项目的时候,经常会用到验证码,一般验证码都是后台给接口。如何在前端生成呢?上代码演示。

WXTML:

<view bindtap="getYzmCode">{{code}}</view>

JS

Page({
    data: {
     code: ''
    },
    onLoad() {
     //进入页面就调用方法 创建一个随机验证码
     this.createCode()
    },
     
    getYzmCode() {
     //点击调用创建验证码方法
     this.createYzmCode()
    },
     
    //创建随机验证码方法
    createYzmCode() {
     let code = ''; //初始化验证码
     let codeLength = 6; //设置验证码长度
     //设置随机字符
     let txt = 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');
     //循环
     for(let i = 0; i < codeLength; i++) {
     //设置随机数范围
     let index = Math.floor(Math.random() * 36);
     code += txt[index];
     }
     //动态设置数据
     this.setDate({
     code
     }) 
    }
})

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20201112a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    其实也不奇怪,有些知识用得少的话,时间久了容易被遗忘。...

  • qianduan

    惭愧啊,我只知道console.log,用的最多的就是这个了。...

  • 访客

    是VS不得不...

  • 访客

    这个页面不是很友好啊...

  • vag13

    不错,正好遇到这个问题,感谢分享...

  • 访客

    第三方的闪光点复合弓...

  • Web前端之家

    后续会出vue3.0教程呢,等待~~...

  • qiqndu

    VUE3.0没教程吗,可以出些啊...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria