微信小程序验证码输入框

微信小程序验证码输入框效果(真是效果请在真机上查看)：

wxml：

<!--pages/security-code/security-code.wxml-->
<view class="signValidateShare">

  <view class="bg">
    <view class="time-wrap">
      <view class="box">
        {{title}}
      </view>
    </view>
  </view>
  <view class="container">
    <scroll-view class="scroll-view" scroll-y scroll-top="{{scrollTop}}">
      <view class="scroll-inner">
        <view class="validataWrap">
            <view class="title">请进行身份验证</view>
            <!-- <view class="des">请输入身份证 (<text class="identity-card">371311199301…</text>) 后6位</view> -->
            <view class="des">请输入身份证 (<text class="identity-card">{{tools.handleSliceIdCard(idCard)}}</text>) 后6位</view>
            <view class="nums">
              <block wx:for="{{inputLength}}">
              <input wx:key="{{index}}" value="{{inputValue.length - 1 >= index ? inputValue[index]: ''}}" type="number" disabled catchtap="handleInputTap"/>
              </block>
              <input class="hidden-input" type="number" focus="{{isFocus}}" maxlength="{{inputLength}}" bindinput="handleInputChange"></input>
            </view>
            <view hidden="{{hideTip}}" class="tip animated shake">您输入的信息有误</view>
        </view> 
        <view class="btn-wrap">
          <button class="{{isLight ? 'validata-btn light-btn' : 'validata-btn'}}" type="default" size="{{defaultSize}}" loading="{{loading}}" 
                  plain="{{plain}}" disabled="{{disabled}}" bindtap="{{isLight? 'handleValidata': null}}" 
                  hover-class="other-button-hover"> 
                  验证 
          </button>
        </view>

      </view>
    </scroll-view>
  </view> 
</view>

<wxs module="tools">
  function handleSliceIdCard( idCard ){
    if(!idCard) return '';
    return idCard.slice(0, -6) + '...';
  }
  module.exports = {
    handleSliceIdCard: handleSliceIdCard
  }
</wxs>

wxss：

/* pages/security-code/security-code.wxss */

.signValidateShare  {
  height: 100%;
  position: relative;
  overflow-x: hidden;
  font-family: PingFangSC-Regular;
}

.signValidateShare  .percent {
  position: absolute;
  width: 100%;
  /* height: 6rpx; */
  left: 0;
  top: 0;
  z-index: 1;
}

.signValidateShare  .percent .des {
  position: absolute;
  /* right: 20rpx; */
  font-size: 22rpx;
    color: rgba(255, 255, 255, 0.5);
  /* padding: 0 20rpx; */
}

.signValidateShare  .bg {
  position: absolute;
  width: 100%;
  height: 450rpx;
  background: #2792ff;
  z-index: -1;
}

.signValidateShare  .no-pass {
  background: #fe4d62;
}

/*  */

.signValidateShare  .bg .time-wrap {
  padding-top: 80rpx;
}

.signValidateShare  .bg .time-wrap .box {
    line-height: 45rpx;
    font-family: PingFangSC-Regular;
    font-size: 32rpx;
    color: #ffffff;
  padding: 0 20rpx;
  text-align: center;
}

.signValidateShare  .bg .time-wrap .box>text {
  font-family: PingFangSC-Semibold;
    font-size: 30rpx;
    color: #ffffff;
  margin-left: .5em;
}

.signValidateShare  .bg .time-wrap .bottom {
  font-size: 24rpx;
    color: rgba(255, 255, 255, 0.5);
}

.signValidateShare  .bg .time-wrap .bottom>text:nth-child(1){
  padding-right: 44rpx;
}

.signValidateShare  .bg .time-wrap .bottom>text:nth-child(2){
  padding-left: 44rpx;
}

.signValidateShare  .container {
  height: calc(100% - 216rpx);
  margin-top: 216rpx;
}

.signValidateShare  .container .scroll-inner {
  height: 100%;
}

.signValidateShare  .container .scroll-inner .btn-wrap {
  margin-top: 150rpx;
}

.signValidateShare  .container .scroll-inner .btn-wrap .validata-btn {
  width: 710rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #2792ff;
  font-size: 28rpx;
    color: #ffffff;
}
/*  */
.signValidateShare  .container .scroll-inner .btn-wrap .validata-btn {
  width: 710rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #e8eaec;
  font-size: 28rpx;
    color: #ffffff;
  border-radius: 12rpx;
}

.signValidateShare  .container .scroll-inner .btn-wrap .validata-btn.light-btn {
  background: #2792ff;
}

.signValidateShare  .container .scroll-view {
  height: 100%;
  box-sizing: border-box;
}

.signValidateShare  .container .validataWrap {
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  background: #fff;
  margin: 0 20rpx 0;
  box-shadow: 0rpx 16rpx 40rpx -8rpx rgba(0, 40, 80, 0.1);
    border-radius: 12rpx;
  padding: 0 30rpx 30rpx;
  min-height: 560rpx;
}

.signValidateShare  .container .validataWrap .title {
  margin-top: 74rpx;
    font-size: 40rpx;
    color: #17233d;
  line-height: 56rpx;
}

.signValidateShare  .container .validataWrap .des {
  margin-top: 12rpx;
    font-size: 24rpx;
    color: #808695;
  line-height: 33rpx;
}


.signValidateShare  .container .validataWrap .nums {
  display: flex;
  justify-content: center;
  height: 94rpx;
  margin-top: 130rpx;
  font-size: 60rpx;
    color: #17233d;
}

.signValidateShare  .container .validataWrap .nums>input {
  width: 90rpx;
  height: 84rpx;
  
  margin-right: 20rpx;
  border-bottom: 1rpx solid #17233d;
  text-align: center;
  line-height: 84rpx;
}

.signValidateShare  .container .validataWrap .nums>input:nth-last-of-type(2) {
  margin-right: 0;
}

.signValidateShare  .container .validataWrap .nums>input.hidden-input {
  width: 0;
  height: 0;
  border: none;
  margin: 0;
}


.signValidateShare  .container .validataWrap .des .identity-card {
    color: #2792ff;
}

.signValidateShare  .container .validataWrap .tip {
  margin-top: 30rpx;
    font-size: 24rpx;
    color: #fe4d62;
}

js:

// pages/security-code/security-code.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputLength: 6, //验证码长度
    inputValue: '', //输入的验证码
    isFocus: true, //聚焦

    isLight: false,  //btn 是否高亮
    hideTip: true, // 错误提示
    idCard: '350105199506138487', //身份证
    title: '标题标题标题标题标题标题', //名称
  },

  // input 输入变化
  handleInputChange(ev) {

    let val = ev.detail.value;
    //判断用户是否已经输入
    let result = Boolean(val.length);

    this.setData({
      isLight: result,
      inputValue: val
    });
  },
  // input 点击  聚焦
  handleInputTap() {
    this.setData({
      isFocus: true
    });
  },


  //身份证验证
  handleValidata() {
    let userIn = this.data.inputValue;
    let real = this.data.idCard.slice(-6);
    this.setData({
      hideTip: true
    });
    //输入是否正确
    if (userIn === real) {
      wx.showToast({
        title: '验证成功',
      })
    } else {
      this.setData({
        hideTip: false
      });
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //禁止转发
    wx.hideShareMenu()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //加载数据
    this.getCustomerInfo();
  },

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

  },

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

  }
})

思路：

1.页面+样式准备

　　设置验证码输入框样式，设置disabled 使其不可输入。

　　另外设置一个输入框隐藏其样式，使其不可见。

　　设置隐藏输入框的最大长度。

2.点击验证码输入框，使隐藏输入框为聚焦状态

3.使用bindinput事件监听输入状态获取value。

4.将value赋值到验证码输入框中

完整代码：https://github.com/PeachCoder/wechat-SecurityCodeInput/tree/master

转自：https://www.cnblogs.com/starnoone/p/9561007.html

来源：https://www.cnblogs.com/taohuaya/p/11719642.html

标签