联系我们
简单又实用的WordPress网站制作教学
当前位置:网站首页 > 网页前端技术 > 正文

微信小程序开发:随机生成验证码 - Web前端

作者:98wpeu发布时间:2026-09-11分类:网页前端技术浏览:2


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

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

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微信小


网页前端技术排行
最近发表
网站分类
标签列表