背景

在小计划开发中，我们经常使用该表格。我们通常需要在上的用户表单输入框的输入框中获取值（通常用户输入：结尾。处理

那么，中获得值的方法是什么？

换句话说，如果提交按钮超出了形式，则如何实现表单的形式？

有两种方法可以在小程序中获得表格的价值

表单的形式组件的值

这是最常见的方法。所有用户输入的组件均置于表单上。

它将以表单组件的形式提交值，但是目前，您需要将名称添加到密钥中的密钥

如UI所示

以下是WXSS代码

/* pages/getformdata/getformdata.wxss */ .container { padding: 15rpx 40rpx; } .title { margin: 20rpx 0; } label { margin-right: 50rpx; } .input { border-bottom: 1px solid #abcdef; } .submitBtn { margin-top: 40rpx; } button:not([size='mini']) { width: 100% !important; }

提醒

在上面的示例代码中，您会发现，当有倍数时，当多个时，它将被包裹在 - ，否则将无法在控件中获得特定值。当然可以使用第二种方法来获取控件中的值

在表格中，这些形式不是必需的。您可以填写控制默认的初始值。在本文的示例中，我给了初始价值

事件方法与表单绑定到表单，该表单将以形式携带数据以触发事件

同时，表单中按按钮中的绑定事件用于提交表单组件，该表单组件将触发表单组件的（已提交的form）/（重置表单）事件

让我们看一下逻辑代码：

// pages/getformdata/getformdata.js Page({ /** * 页面的初始数据 */ data: {

inputVal: '123', }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // 表单提交 formSubmit(event) { console.log(event); // event.detail.value就可以拿到具体表单中的值 const { switchChecked, radio, checkbox, slider, input, } = event.detail.value; // 解构 console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123" }, });

通过表单表单中控件的值是将组件中的名称属性添加到组件中组合形式的事件中。

当您以表格中的值获得值时，您可以在以后继续操作，传递该值，然后将相应字段提交给背景处理。

优点：传统表单提交方法，通过在表单控件中设置名称的值，当统一提交时，您可以通过。.获取表单中每个表单组件的值。

缺点：无法获得表格之外的其他表格。按钮页面必须在表单中，并且写作方法已修复

以下引入了非形式提交方法，即，它不依赖表单，您也可以获取表单组件的值

在小程序中，此应用程序方案非常普遍。以表格提交数据的形式可能不是按钮的方式。只要您可以在表单组件中获得值，它就会实现目的。

非表公式的值获得了形式分量的形式

以下是实例的效果

以下是实例代码，该代码类似于上面的代码，但已稍微更改

删除表单，名称属性，将方法添加到表单组件中

switch radio 男 女 checkbox itclanCoder itclan slider 提交

添加该方法时，添加了方法，并且在更改更改时将触发事件。

如以下代码所示

// pages/getformdata/getformdata.js Page({ /** * 页面的初始数据 */ data: {

switchVal: true, // switch默认初始化值 radioVal: 'boy', // radio初始化值,有时候男女,也可以用1,0等表示男,女的 checkboxVal: 'itclanCoder', // checkbox初始化值 sliderVal: 30, inputVal: '123', // 输入框初始化值 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // switch中的值 handleSwitch(event) { console.log(event); const switchVal = event.detail.value; this.setData({ // 通过setData更改数据 switchVal, }); }, // 触发readio handleRadio(event) { console.log(event); const radio = event.detail.value; this.setData({ radioVal: radio, }); }, // 触发checkbox handleCheckBox(event) { console.log(event); const checkbox = event.detail.value; this.setData({ checkboxVal: checkbox, }); }, // 触发slideChange handleSlideChange(event) { console.log(event); const sliderVal = event.detail.value; this.setData({ sliderVal: sliderVal, }); }, // input输入框的值 handleInputChange(event) { console.log(event); const inputVal = event.detail.value; this.setData({ inputVal: inputVal, }); }, // 表单提交 handleSubmit() { console.log( this.data.switchVal, this.data.radioVal, this.data.checkboxVal, this.data.sliderVal, this.data.inputVal ); // true "boy" "itclanCoder" 30 "123" }, });

以上是通过非形象提交的方法中的形式组件中的值。此方法不仅限于形式。它更灵活。首先，初始化表单，然后绑定表单组件的事件。事件，然后您可以通过事件对象获得表单组件的值

如果方法方法，re -data就足够了

优点：非形式形式，以组合方法提交数据，更灵活（也可以在表单之外提交数据）

缺点：需要添加绑定事件并需要触发，但是频繁的触发因素是相对消耗的性能。如果形式不多，则可以选择此方法。

注意

当传统表单提交数据时，必须将其设置为键，否则无法获得表单组件中的值，而不是以表单的形式提交数据，而是需要绑定到表单组件。

这是一个应用程序方案，例如：在我的小程序中的页面中，数据由非表单方面提交

总结

全文摘要的两个段落是：

有两种方法可以在中获得表单组件的值。一种是结合传统形式的组合。此方法是有限的。所有表单组件都需要以形式组件进行设置，并以表单组件中的表单组件设置名称值。在表单组件中获取值（必须设置表单，否则表单组件的值是表单组件的值。）提交非形式表单数据的方法是在表单组件和表单上获取事件和获得。您可以得到它，但是牺牲表现也需要触发，因此当提交表单时，获得特定的表单价值