微信小程序开发:随机生成验证码 - Web前端
作者:98wpeu发布时间:2026-09-11分类:网页前端技术浏览:81
导读:今天分享下一个微信小程序开发的经验:如何随机生成验证码。我们平时在开发表单项目的时候,经常会用到验证码,一般验证码都是后台给接口。如何在前端生成呢?上代码演示。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
})
}
})
相关推荐
- 图片放大镜jquery.jqzoom.js使用实例附放大镜图标 - Web前端
- 使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方) - Web前端
- jquery ztree实现下拉树形框使用到了json数据 - Web前端
- jquery处理json数据实例分析 - Web前端
- jquery实现select选中行、列合计示例 - Web前端
- 在jquery boxy中添加百度地图坐标拾取注意流程 - Web前端
- jquery新的绑定事件机制on方法的使用方法 - Web前端
- jQuery防止click双击多次提交及传递动态函数或多参数 - Web前端
- jQuery实现回车键(Enter)切换文本框焦点的代码实例 - Web前端
- 使用JS或jQuery模拟鼠标点击a标签事件代码 - 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属性


