【純前端】微信小程序驗證碼

效果圖：

 

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


})　

到此結束