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

效果图：

 

index.wxml 

 

<view class="page__bd">
  <view class="weui-cells weui-cells_after-title" >
    <view class="find_result">
      <view class="result_inner">
        <view class="result_inner_title">请在下方输入图形验证码</view>
        <view class="result_inner_input">
          <input value="" class="input_input" bindinput='makecodeInput'></input>
          <view class='makecode'>{{code}}</view>
          <view class="getcode" bindtap='getcode'>换一张</view>
        </view>
        <view class="result_btn">
          <view bindtap="cancelBtn">取消注销</view>
          <view bindtap="confirmBtn">确定注销</view>
        </view>
      </view>
    </view>
  </view>
</view>

 

index.wxss

.find_result{
  margin: 30rpx auto 0;
  width: 690rpx;
  height: 380rpx;
  background: #FFFFFF;
  border-radius:30rpx; 
}
.result_inner{
  padding-top: 48rpx;
  margin:0 103rpx 0;
  height: inherit
}
.result_inner_title{
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  color:#888888;
}
.result_inner_input{
  width: 480rpx;
  height: 90rpx;
  background: #F1F1F1;
  border-radius:45rpx;
  margin-top: 36rpx;
  position: relative;
}
.input_input{
  line-height: 90rpx;
  height: 90rpx;
  width: 306rpx;
  position: absolute;
  left: 30rpx;
  top: 0;
}
.makecode{
  width: 149rpx;
  height: 53rpx;
  background: #FFFFFF;
  border-radius: 26.5rpx;
  position: absolute;
  right: 25rpx;
  top:20rpx;
  color:#0903EC;
  text-align: center;
  line-height: 53rpx;
}
.getcode{
  font-size: 24rpx;
  color:#444444;
  position: absolute;
  width: 71rpx;
  height: 23rpx;
  right:-80rpx;
  top:30rpx;
}
.result_btn{
  /* width: 100%; */
  margin-top: 49rpx;
  height: 70rpx;
  padding: 0rpx 30rpx;
  margin-bottom: 60rpx;
}
.result_btn view{
  width: 180rpx;
  height: 70rpx;
  border-radius: 35rpx;
  border:2rpx solid #97C9C6;
  display: inline-block;
  color: #97C9C6;
  line-height: 70rpx;
  text-align: center;
  font-size:30rpx; 
}
.result_btn view:nth-child(2){
  background: #97C9C6;
  color: #FFFFFF;
  float: right;
}

 

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    code:"",
  },
  //验证码
  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) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.createCode();
  },
  getcode: function () {
    this.createCode();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  cancelBtn:function(){
    wx.redirectTo({
      url: '/pages/setup/setup',
    })
  },

  confirmBtn: function () {
    if (this.data.makecode != this.data.code) {
      wx.showToast({
        title: '验证码不正确',
        icon: 'none',
        duration: 2000
      })
    }else{
      console.log("注销成功")
      wx.redirectTo({
        url: '/pages/setup/logoutSuccess',
      })
    }
    
  },
  //获取输入验证码
  makecodeInput: function (e) {
    this.setData({
      makecode: e.detail.value
    })
  },


})　

到此结束