微信小程序开发:随机生成验证码 - Web前端
作者:98wpeu发布时间:2026-09-11分类:网页前端技术浏览:4
导读:今天分享下一个微信小程序开发的经验:如何随机生成验证码。我们平时在开发表单项目的时候,经常会用到验证码,一般验证码都是后台给接口。如何在前端生成呢?上代码演示。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
})
}
})
相关推荐
- Python正则表达式匹配多行注释和文档字符串 - Web前端
- Windows Terminal:完整指南 - Web前端
- 了解下经过重构后的Microsoft Edge浏览器 - Web前端
- Adobe杀死Acrobat和Reader中的Flash –推出了这些重要的安全错误修复程序 - Web前端
- vue中setTimeout无法通过clearTimeout清除问题 - Web前端
- 聊聊前端开发中Vue.js组件间的循环引用方法 - Web前端
- Windows 10 20H2更新:面向IT专业人员的新功能 - Web前端
- 在vscode里开发vue项目需要安装的插件:eslint - Web前端
- Twitter、YouTube、Facebook等知名网站已经开始强制限制IE了,您还在用IE? - Web前端
- 如何从DOM转换为SVG坐标并再次返回 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - 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属性


