欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序验证码功能设计与实现

程序员文章站 2022-08-05 14:29:53
【纯前端】微信小程序验证码 index.wxml 验证码: {{code}}登录 index.js data: { code: "",...

    【纯前端】微信小程序验证码

    index.wxml

      验证码:
      
      {{code}}登录

    index.js

    data: {
        code: "",
        makecode:"",
      },
     //获取输入验证码
      makecodeinput:function(e){
        this.setdata({
          makecode:e.detail.value
        })
      },
    // 登录
      login: function() {
        if(this.data.makecode != this.data.code){
          wx.showtoast({
            title: '验证码不正确',
            icon: 'none',
            duration: 2000
          })
        }
     },
     //验证码
      createcode() {
        var code;
        //首先默认code为空字符串
        code = '';
        //设置长度,这里看需求,我这里设置了4
        var codelength = 4;
        //设置随机字符
        var random = new array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
        //循环codelength 我设置的4就是循环4次
        for (var i = 0; i < codelength; i++) {
          //设置随机数范围,这设置为0 ~ 10
          var index = math.floor(math.random() * 10);
          //字符串拼接 将每次随机的字符 进行拼接
          code += random[index];
        }
        //将拼接好的字符串赋值给展示的code
        this.setdata({
          code: code
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onload: function(options) {
        this.createcode();
      },
      getcode: function() {
        this.createcode();
      },