当前位置: 移动技术网 > IT编程>网页制作>CSS > 微信小程序验证码功能设计与实现

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

2018年10月25日  | 移动技术网IT编程  | 我要评论

北京721,无机化学第三版,结婚后发现丈夫不是人

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

    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();
      },

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网