微信小程序实现随机验证码功能

2024-04-23 05:18:07

本文实例为大家分享了微信小程序实现随机验证码的具体代码，供大家参考，具体内容如下

效果图：

小程序上经常会有一些注册申请页面需要用到随机验证码。具体实现方法不多说直接上代码

<view class='yanzhengma'>
  <text class='left'>{[code]}</text>
  <text class='right' bindtap='huanyizhang'>换一张</text>
</view>

CSS:

.yanzhengma {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yanzhengma .left {
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  border: 0;
  letter-spacing: 3px;
  font-size: 18px;
  background-color: #ccc;
  padding: 10rpx;
  margin-right: 20rpx;
  color: blue;
}

js:

Page({

  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  //刚进入页面随机先获取一个
    this.createCode()

  },
  huanyizhang(){
    this.createCode()
  },
  createCode() {
    var code;
    //首先默认code为空字符串
    code = '';
    //设置长度，这里看需求，我这里设置了4
    var codeLength = 4;
    //设置随机字符
    var random = 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');
    //循环codeLength 我设置的4就是循环4次
    for (var i = 0; i < codeLength; i++) {
      //设置随机数范围,这设置为0 ~ 36
      var index = Math.floor(Math.random() * 36);
      //字符串拼接 将每次随机的字符 进行拼接
      code += random[index];
    }
    //将拼接好的字符串赋值给展示的code
    this.setData({
      code: code
    })
  },

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序表单验证错误提示效果

微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下以下是效果图: 代码如下: WXML: <view class="ad_popError" wx:if="{{popErrorMsg}}">{{popErrorMsg}}</view> <view class="ad_popFt"> <form bindsubmit="goDetail" > <textarea
微信小程序实现基于三元运算验证手机号/姓名功能示例

本文实例讲述了微信小程序实现基于三元运算验证手机号/姓名功能.分享给大家供大家参考,具体如下: wxml部分: <view class="fl_form" style="position:relative;padding-top:20rpx;"> <text><text style="color:red;padding-right:10rpx">*</text>您的姓名</text> &
微信小程序手机号码验证功能的实例代码

wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi
微信小程序6位或多位验证码密码输入框功能的实现代码

在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一.效果图如下: 二.代码部分 wxml: <form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="i
微信小程序如何获取手机验证码

一种比较常见的功能获取手机验证码,供大家参考,具体内容如下先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题直接上代码吧: <view class='changeInfo'> <view class='changeInfoName'> <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> </view> <view class
微信小程序实现验证码获取倒计时效果

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
微信小程序功能函数小结(手机号验证*、密码验证*、获取验证码*)

下面一小段代码给大家介绍微信小程序功能函数密码验证*,具体代码如下所示: //登录输入密码 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
微信小程序实现随机验证码功能

本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下效果图: 小程序上经常会有一些注册申请页面需要用到随机验证码.具体实现方法不多说直接上代码 <view class='yanzhengma'> <text class='left'>{[code]}</text> <text class='right' bindtap='huanyizhang'>换一张</text> </view> CSS: .ya
微信小程序实现随机验证码

本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下废话不多说,直接上图看效果一.实现功能 1.点击灰色底的验证码图片可以更换一张验证码 2.验证输入的验证码是否正确,并且输入小大写英文都可以. 二.核心代码注意:我是用uni-app框架写的,用原生写的朋友自行修改一下写法哈 html的代码: <template> <view> <form @submit="formSubmit">
微信小程序自动客服功能

微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var
基于PHP实现微信小程序客服消息功能

项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南客服消息服务端适用场景客户消息流程图使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu
微信小程序视频弹幕发送功能的实现

1. 目录结构 2. videoDanmu  <video src="{{src}}" id='video' danmu-btn enable-danmu danmu-list="{{ danmuList }}" > </video>  <view class='sendDanmu'> <textarea name="" id
微信小程序获取手机验证码的方法

本文实例为大家分享了微信小程序获取手机验证码的具体代码,供大家参考,具体内容如下完成手机验证码的功能: (1)效果图如下: (开始发送验证码) (重新发送验证码) (2)需求及思路说明: 输入正确的11位手机号,使用正则校验. 校验手机号的归属地----北京移动(这个根据需求而定) 点击 “获取验证码” ,获取成功与失败,都会以弹框的形式展现,完成倒计时. 倒计时为 ‘0’ 的时候,按钮文字变成 “重新发送” 当按钮是 “获取验证码” 和 “重新发送” 的时候,按钮是可以点击进行倒计时的在倒
微信小程序实现动态验证码

目录一.创建自定义组件verification-code 二.在index页面使用本文实例为大家分享了微信小程序实现动态验证码的具体代码,供大家参考,具体内容如下一.创建自定义组件verification-code verification-code.js // pages/test1/verificationQr/verificationQr.js var ctx; Component({ /** * 组件的属性列表 */ properties: { widt
C#开发之微信小程序发送模板消息功能

步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 步骤三:调用接口下发模板消息今天重要的说第三步怎么实现,前面的步骤比较简单就略过. ----------------------------
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图从左边的列表页调到右边的详情页二.页面之间的跳转首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi
微信小程序实现的涂鸦功能示例【附源码下载】

本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container">  <view class="canvas_area">  &

微信小程序实现随机验证码功能

相关推荐

随机推荐