微信小程序快速获取到输入框的值

<view class="container">
  <view class="main">
      <view class="list">
        <view class="icon icon1"><image src="../../../images/login01.png"></image></view>
        <view class="inpuText">
          <input
            data-field="username"
            bindinput="handleChange"
            value="{{ values.username }}"
            type="text"
            maxlength="8"
            placeholder="姓名"
              />
        </view>
      </view>
      <view class="list">
        <view class="icon icon2"><image class="icon2" src="../../../images/login02.png"></image></view>
        <view class="inpuText">
          <input
            data-field="userphone"
            bindinput="handleChange"
            value="{{ values.userphone }}"
            type="number"
            maxlength="11"
            placeholder="手机号码"
              />
        </view>
      </view>
      <view class="list">
        <view class="icon icon3"><image class="icon3" src="../../../images/login03.png"></image></view>
        <view class="inpuText seePaw">
          <input
            data-field="password"
            bindinput="handleChange"
            value="{{ values.password }}"
            type="{{passType}}"
            maxlength="16"
            placeholder="输入密码"
                  />
          <image src="{{iconSee}}"  class="See" bindtap="iconSee"></image>
        </view>
      </view>
      <view class="list">
        <view class="icon"><image class="icon4" src="../../../images/login04.png"></image></view>
        <view class="inpuText validation">
             <input
            data-field="code"
            bindinput="handleChange"
            value="{{ values.code }}"
            type="number"
            maxlength="6"
            placeholder="验证码"
                  />
          <text catchtap="getShortMsg">| {{ time <= 0 ? '获取验证码' : time + 's 后重发' }}</text>
        </view>
      </view>
      <view class="subBtn" bindtap="subBtn">确定</view>
      <view class="note"><text>免责声明:</text></view>
  </view>


</view>
.container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.main{
  width: 560rpx;
  position: absolute;
  top: 19.87%;
  left: 50%;
  transform: translateX(-50%);
  height: 500rpx;
}
.main .list{
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
}
.main .list .icon{
  width: 15%;
  height: 100rpx;
  line-height: 100rpx;
  /* text-align: center; */
}
.main .list .icon image{
  width: 35rpx;
  height: 35rpx;
}
.main .list .icon .icon2,.main .list .icon .icon3{height: 40rpx}
.main .list .icon .icon4{width: 40rpx;}
.main .list .inpuText{
  width: 85%;   
  border-bottom: 1px solid #9fa0a0;
}
.main .list .inpuText input{
  padding-left: 10rpx;
  color: #979797;
  width: 80%;
}
.main .list .validation,
.main .list .seePaw{
  display: flex;
}

.See{
  width: 50rpx;
  height: 50rpx;
}
.main .list .validation text{
  display: block;
  color: #c9caca;
}
.main .list .validation input{
  width: 50%;
}


.main .subBtn{
  width: 100%;
  height: 80rpx;
  color: #fff;
  font-size: 35rpx;
  letter-spacing: 10rpx;
  font-weight: bold;
  background: #fdd000;
  line-height: 80rpx;
  text-align: center;
  margin-top: 60rpx;
  border-radius: 10rpx;
}
.main .note{
  font-size: 20rpx;
  color: #595757;
  line-height: 35rpx;
  padding-top: 30rpx;
}
.main .note text{
  font-weight: bold;
}
// pages/loginInfo/registe/registe.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    values:{},
    time:"0",
    passType: "password",
    iconSee: "../../../images/icon-see.png"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },
  // 验证码获取
  getShortMsg(e) {
    if (this.data.time <= 0) {
      this.startTimer();
    }
  },
  startTimer() {
    this.setData({
      time: 60
    }, () => {
      this.timer = setInterval(() => {
        if (this.data.time > 0) {
          this.setData({
            time: this.data.time - 1
          })
        } else {
          clearInterval(this.timer)
        }
      }, 1000)
    })
  },
  // 查看密码
  iconSee: function (e) {
    if (this.data.passType == "password") {
      this.setData({
        iconSee: "../../../images/icon-seepass.png",
        passType: "text"
      })
    } else {
      this.setData({
        passType: "password",
        iconSee: "../../../images/icon-see.png"
      })
    }
  },
  // 信息提交
  handleChange(e) {
    const field = e.currentTarget.dataset.field;
    let values = { ...this.data.values };
    values[field] = e.detail.value;
    this.setData({
      values
    });
  },
  subBtn() {
    const { username,password, userphone,code } = this.data.values;
    console.log(username, password, userphone, code)
    if (!username) {
      wx.showToast({
        title: '请输入姓名',
        icon: "none"
      })
      return false;
    }
    if (!userphone) {
      wx.showToast({
        title: '请输入手机号',
        icon: "none"
      })
      return false;
    }
    if (!(/^(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8})$/.test(userphone))) {
      wx.showToast({
        title: '手机号不正确',
        icon: "none"
      })
      return false
    }
    if (!password) {
      wx.showToast({
        title: '请输入密码',
        icon: "none"
      })
      return false;
    }
    if (!code) {
      wx.showToast({
        title: '请输入验证码',
        icon: "none"
      })
      return false;
    }
    wx.navigateTo({
      url: '../login/login'
    })
    // http.post('/api', {
    //   ...this.data.values
    // }).then(res => {
    //   if (res.code == 1) {
    // wx.navigateBack();
    //   }
    // })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function(e) {

  },

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

  },

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

  },

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

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

  }
})

 

posted @ 2020-04-10 09:32  Mr▪小zhou  阅读(576)  评论(0编辑  收藏  举报