微信小程序 - form表单提交时拿到用户输入的所有数据（bindsubmit）

前言

在 Vue 中你可以直接双向绑定，然后提交时获取即可，但小程序不可以这么做。

在小程序中，你虽然也可以完成数据双向绑定，但是如果 表单项（input / check / button...） 特别多的话，不仅难以维护，还会造成代码冗余。

实现过程

form 文档：https://developers.weixin.qq.com/miniprogram/dev/component/form.html

好在，form 组件提供了 bindsubmit 提交事件，具体请移步上面官方文档。

实现过程分为以下几步（具体下方看实例代码）：

1. 给 form 表单设置 bindsubmit 属性。
2. 给所有 input / check等等项 设置 name 属性（否则无法获取值）。
3. 给按钮设置 form-type="submit" ，与第一步 form 设置的 bindsubmit 属性值 绑定。
4. 编写按钮触发的函数（第一步与第三步共同绑定的属性值即为触发函数）

实例

效果图：

wxml：

<form bindsubmit="submit">
  <text>用户名：</text>
  <input type="text" name="user"></input>

  <text>密码：</text>
  <input type="password" name="pwd"></input>

  <button form-type="submit">确定</button>
</form>

js：

Page({

  /*
  * 事件处理
  */
  data: {
    
  },

  /*
  * 事件处理
  */
  submit: function(e) {
    
    // 在e对象上拿到用户输入的数据
    // 你可以log一下事件对象e看看是什么
    let user = e.detail.value.user//用户名
    let pwd = e.detail.value.pwd//密码

    // 业务逻辑处理
    // ...
    wx.showToast({
      icon: 'none',
      title: `用户名:${user} —— 密码:${pwd}`
    })
  }
  
})

wxss：

/* 简单来点样式 */
input {
  border: 1px solid red;
}
/* END */