027-87227388

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

发布时间:2020-12-18 浏览:1519

 本文章向大家介绍微信小程序快速获取到输入框的值,主要包括微信小程序快速获取到输入框的值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

 
<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.jsPage({  /**
   * 页面的初始数据   */
  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() {

  }
})