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

末蓝、 2022-11-28 10:58 245阅读 0赞

## 前言 ##

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

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

## 实现过程 ##

> form 文档：[https://developers.weixin.qq.com/miniprogram/dev/component/form.html][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.  编写按钮触发的函数（第一步与第三步共同绑定的属性值即为触发函数）

## 实例 ##

**效果图：**  
![在这里插入图片描述][20200817164137619.gif_pic_center]

**wxml：**

**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 */

[https_developers.weixin.qq.com_miniprogram_dev_component_form.html]: https://developers.weixin.qq.com/miniprogram/dev/component/form.html
[20200817164137619.gif_pic_center]: /images/20221124/559d4eb7aa3542ca889e98fea31b0780.png