微信小程序方格子验证码复制粘贴就能用，卧龙凤雏前来报到

最近碰到了一个需求是关于验证码的正好拿出来给兄弟们分享一下，想要几个框自己在js里面设置一下有密文等等，看大家需求。

下面展示一下，代码里都有标注小白也能看的懂

 

<view>
//这是vant的头部需要先引入不想要可以注释掉
 <van-nav-bar title="短信验证码登录" left-text="" left-arrow bind:click-left="onClickLeft" bind:click-right="onClickRight" />

 <view style="height: 130rpx;">
 </view>
 <view class="content">
  <view class="content_title">
   输入短信验证码
  </view>
  <view class="content_cell">
   短信验证码至 <text>{{cell}}</text>
  </view>
  <view>
   <form bindsubmit="formSubmit">
​    <view class='content_1'>
​     <block wx:for="{{Length}}" wx:key="item">
​      <input class='iptbox' style="background-color: {{Value.length==index?'#1194FB':''}}; box-shadow:{{Value.length==index?'0rpx 3rpx 10rpx 3rpx rgba(17,148,251,0.17)':''}};background-color: {{Value.length+1==index?'#FFFFFF':''}}; box-shadow:{{Value.length+1==index?'0rpx 3rpx 10rpx 3rpx #E1E1E1':''}};background-color:{{whether?'#FF3334':''}}; box-shadow:{{whether?'0rpx 3rpx 10rpx 3rpx rgba(254,54,49,0.26)':''}};clear: {{whether?'#FFFFFF':''}}; " value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
​     </block>
​    </view>
​    <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
​    <!-- <view>
​     <button class="btn-area" formType="submit">Submit</button>
​    </view> -->
   </form>
  </view>
  <view class="mistake" wx:if="{{whether}}">
   验证码有误，请重新输入
  </view>
  <view class="content_time" wx:if="{{coding==0}}">
   {{time}}秒后重新发送 <text style="color: #1194FB;">没有收到验证码?</text>
  </view>
  <view class="content_time" wx:if="{{coding==1}}" bindtap="onClickLeft">
   重新发送
  </view>
 </view>
</view>

Page({
 /**
  \* 页面的初始数据
  */
 data: {
  Length: 4, //输入框个数
  isFocus: true, //聚焦
  Value: "", //输入的内容1
  ispassword: false, //是否密文显示 true为密文， false为明文。
  time: 60,
  // 显示是否重新发送
  coding: 0,
  // 手机号
  cell: '',
  // 验证成功与否
  whether: false
 },
//60秒倒计时结束后可重新返回上一个页面进行再次发送验证码
 onClickLeft() {
    wx.navigateBack({
      delta: 1
    })
  },
//input事件位置
 Focus(e) {
  var inputValue = e.detail.value;
  this.setData({
   Value: inputValue,
  })
//验证码输入完毕会进行判断
  if (this.data.Value.length == 4) {
  //在这里判断输入的是否错误如果错误的话就让whether=true，否则false
   if(){
    this.setData({
       whether: false,
     })
   }else{
      this.setData({
       whether: true,
      })
}
​    } else {
​    
  } 
 },
 Tap() {
  var that = this;
  that.setData({
   isFocus: true,
  })
 },
 // 按钮
 formSubmit(e) {
  console.log(e.detail.value.password);
 },
 /**
  \* 生命周期函数--监听页面加载
  */
 onLoad(options) {
    //上个页面带过来的验证码
    this.setData({
      cell: options.cell
    })
  //计时60秒结束可返回上一个页面重新发送验证码
    let second = setInterval(res => {
      this.data.time--
      this.setData({
        time: this.data.time
      })
      if (this.data.time <= 0) {
        clearInterval(second)
        this.setData({
          coding: 1
        })
      }
    }, 1000)
 },
 /**
  \* 生命周期函数--监听页面初次渲染完成
  */
 onReady() {
 },
 /**
  \* 生命周期函数--监听页面显示
  */
 onShow() {
 },
 /**
  \* 生命周期函数--监听页面隐藏
  */
 onHide() {
 },
 /**
  \* 生命周期函数--监听页面卸载
  */
 onUnload() {
 },
 /**
  \* 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh() {
 },
 /**
  \* 页面上拉触底事件的处理函数
  */
 onReachBottom() {
 },
 /**
  \* 用户点击右上角分享
  */
 onShareAppMessage() {
 }
})

page {

 background: #FFFFFF;

}

.content_title {

 font-size: 42rpx;

 font-weight: 600;

 color: #202020;

 letter-spacing: 1px;

 margin: 0 auto;

 text-align: center;

}
.content_cell {

 text-align: center;

 font-size: 24rpx;

 font-weight: 400;

 color: #858585;

 margin-top: 20rpx;

}

.content_time {

 font-size: 24rpx;

 font-weight: 400;

 color: #858585;

 letter-spacing: 1px;

 text-align: center;

 margin-top: 30rpx;

}

.content_1 {

 width: 440rpx;

 margin: 0 auto;

 display: flex;

 justify-content: space-around;

 align-items: center;

 margin-top: 100rpx;

}

.iptbox {

 width: 80rpx;

 height: 80rpx;

 border: 1rpx solid #ddd;

 border-radius: 20rpx;

 display: flex;

 justify-content: center;

 align-items: center;

 text-align: center;

 background: #F5F5F5;

 font-weight: 400;

 font-size: 30rpx;

 color: #202020;

}


.ipt {

 width: 0;

 height: 0;

}

.btn-area {

 width: 80%;

 background-color: orange;

 color: white;

}

.mistake {

 font-size: 22rpx;

 font-weight: 400;

 color: #C34D55;

 line-height: 30rpx;

 letter-spacing: 1px;

 text-align: center;

}