【微信小程序】表格输入框的输入获取

这篇文章主要展示两种表格输入框的输入获取，主要对于项目中用户信息填写，登录注册这样的情况
1.使用input的bindinput属性来动态获取对应输入框值的变化
优点：比较灵活，随时获取值变化
2.使用form表单的形式在提交时获取数据
优点：代码量少

以登录账号密码为例子

一、input的方式
tips:input通过属性type（passWord）可以控制星号的隐藏效果

布局代码

<input class="num" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999" bindinput="accountInput">
</input>
<input class="num" placeholder="请输入密码" placeholder-style="color:#999999" bindinput="passwordInput"></input>
<button class="btn_login" type="default" disabled="{{disable}}" bindtap="login"> 登录</button>

js代码

//更新账户输入
accountInput:function(e){
      var content=e.detail.value;
      console.log(content);
      this.setData({
        account:content
      })
  },

//更新密码输入
  passwordInput:function(e){
    var content=e.detail.value;
    console.log(content);
    this.setData({
      password:content
    })
  },

//提交操作
  login:function(){
    var self=this;
    console.log(self.data.account+"--"+self.data.password)
  },

输入数据的时候实时更新数据，提交的时候检验数据

二、使用form表单的形式

页面代码

<view class="form-box">
<form bindsubmit="formSubmit">
  <input name="name" placeholder="用户名/邮箱、手机"></input>
  <input name="password" placeholder="密码"></input>
  <button class="view-button" form-type="submit" bindtap="formSubmit">保存</button>
</form>
</view>

js代码

//提交表单
  formSubmit:function(e){
//获取表单中输入框数据
    var value = e.detail.value;
//value.name 对应账号输入框  value.password对应密码输入框
    if(value.name&&value.password){
      wx.setStorage({
        key: 'address',
        data: value,
        success(){
          wx.navigateBack();
        }
      })
    } else{
      wx.showModal({
        title: '提示',
        content: '请填写完整资料',
        showCancel:false
      })
    }
  },