微信小程序开发:随机生成验证码 - Web前端
作者:98wpeu发布时间:2026-09-11分类:网页前端技术浏览:128
导读:今天分享下一个微信小程序开发的经验:如何随机生成验证码。我们平时在开发表单项目的时候,经常会用到验证码,一般验证码都是后台给接口。如何在前端生成呢?上代码演示。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
})
}
})
相关推荐
- Vue Multiselect 3.0.0有哪些值得关注的新变化? - Web前端
- Vue开发:defineComponent和watch的基础关系得先搞明白 - Web前端
- Vue 2.0和3.0有哪些核心差异?开发者该如何选择? - Web前端
- Vue3中用Hooks封装watch时常见问题有哪些?怎么避坑? - Web前端
- Vue3的Watch Composable到底怎么用?一篇讲透核心用法与避坑指南 - Web前端
- Nuxt 3.5升级Vue 3.5后,前端开发有哪些新变化? - Web前端
- Nuxt 3和Vue 3.0是什么关系?为什么说它们是黄金组合? - Web前端
- ref到底是什么?和reactive有啥本质区别? - Web前端
- Vue3为啥要调整this的逻辑? - Web前端
- Vue 3.0 Composition API是什么?新手该怎么上手? - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 7jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9jQuery编写widget的一些技巧分享 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


