微信小程序实现点击生成随机验证码
本文实例为大家分享了微信小程序实现点击生成随机验证码的具体代码,供大家参考,具体内容如下
效果图
wxml
<view bindtap="getCode">{{ code }}</view>
js
Page({ data: { code: '' }, onLoad() { //进入页面就调用方法 创建一个随机验证码 this.createCode() }, getCode() { //点击调用创建验证码方法 this.createCode() }, //创建随机验证码方法 createCode() { 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 }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序绑定手机号获取验证码功能
微信小程序验证码获取方式,代码如下所示: <!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo
-
微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class="container"> <view class='row'> <input placeholder='请输入姓名' bindinput='bindNameInput'/> </view> <view class='row'> <inpu
-
微信小程序实现倒计时60s获取验证码
本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length
-
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
下面一小段代码给大家介绍微信小程序 功能函数 密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str
-
详解如何使用微信小程序云函数发送短信验证码
其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1.安装 下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去 注:下载的SDK是一个
-
微信小程序如何获取手机验证码
一种比较常见的功能获取手机验证码,供大家参考,具体内容如下 先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题 直接上代码吧: <view class='changeInfo'> <view class='changeInfoName'> <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> </view> <view class
-
微信小程序实现随机验证码功能
本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下 效果图: 小程序上经常会有一些注册 申请页面需要用到随机验证码.具体实现方法不多说 直接上代码 <view class='yanzhengma'> <text class='left'>{[code]}</text> <text class='right' bindtap='huanyizhang'>换一张</text> </view> CSS: .ya
-
微信小程序实现验证码获取倒计时效果
本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获
-
微信小程序实现发送验证码按钮效果
本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码,供大家参考,具体内容如下 首先上图,最终效果如下: 实现关键点 获取验证码按钮无边框: 可以用 button::after{ border: none; } 来去除边框,或者直接用view绑定点击事件.本例子中没有使用button 点击发送后,60秒内按钮处于disable状态 点击发送后,text分为剩余秒数和后缀两部分 .form_group 使用 flex 布局 代码 .wxml <view class="form_gr
-
微信小程序6位或多位验证码密码输入框功能的实现代码
在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一.效果图如下: 二.代码部分 wxml: <form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="i
随机推荐
- VMware Workstation12安装Ubuntu和VMware Tools教程
- 利用AJAX与数据岛实现无刷新绑定
- jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
- jquery制作居中遮罩层效果分享
- Linux中基本正则表达式
- Nginx对某个目录设置密码保护例子
- C#多线程学习之(五)使用定时器进行多线程的自动管理
- js监听滚动条滚动事件使得某个标签内容始终位于同一位置
- Android使用MediaRecorder类进行录制视频
- 利用python获取当前日期前后N天或N月日期的方法示例
- 应用开发中涉及到的css和php笔记分享
- php中的单引号、双引号和转义字符详解
- 为你的微信小程序体积瘦身详解
- 基于JavaScript实现类似于百度学术高级检索功能
- Python实现变量数值交换及判断数组是否含有某个元素的方法
- js/html光标定位的实现代码
- linux mysql 数据库开启外部访问设置指南
- jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
- Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)
- 简单的仿Flash文字动画(兼容Mozilla)