微信小程序表单Form实例详解（附源码）

下面我就来详细讲解“微信小程序表单Form实例详解（附源码）”的完整攻略。

一、前言

在微信小程序的开发中，表单是非常常见的功能之一，而表单的开发需要使用到 Form 组件。本文将详细讲解微信小程序中的 Form 组件，并提供具体的实例与源码以供参考。

二、Form组件的介绍

Form 组件是微信小程序中的表单组件，它主要用于收集用户的输入数据，并进行数据提交或者数据验证等操作。Form 组件的使用非常简单，只需要将表单中的所有元素都放在 Form 组件内即可。

三、Form组件的使用

下面我们将结合具体实例来演示 Form 组件的使用。

3.1 基础用法

我们先来看看最基本的 Form 组件的用法，具体代码如下：

<!--wxml-->
<form bindsubmit="formSubmit">
  <input name="userName" placeholder="请输入用户名" />
  <input type="password" name="password" placeholder="请输入密码" />
  <button form-type="submit">提交</button>
</form>

//js
Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  }
})

在上面的代码中，我们首先通过 <form> 标签将所有表单元素包裹起来，然后在 <button> 元素中设置 form-type="submit"，这样当用户点击提交按钮时，就会触发 Form 组件的 bindsubmit 事件。

在页面的 JS 文件中，我们对 Form 组件的 bindsubmit 事件进行监听，然后通过 e.detail.value 获取用户输入的数据。

3.2 自定义提交按钮

我们还可以自定义表单中的提交按钮，具体代码如下：

<!--wxml-->
<form bindsubmit="formSubmit">
  <input name="userName" placeholder="请输入用户名" />
  <input type="password" name="password" placeholder="请输入密码" />
  <!-- 自定义提交按钮 -->
  <view class="submit-btn" bindtap="submitForm">提交</view>
</form>

//js
Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  submitForm: function () {
    // 点击自定义提交按钮时，手动触发表单提交事件
    this.selectComponent("#myForm").submitForm()
  }
})

在上面的代码中，我们使用 view 标签来自定义提交按钮，并在 bindtap 事件中调用 submitForm 方法。在页面的 JS 文件中，我们定义了 submitForm 方法，并在该方法中手动触发表单提交事件。

四、完整源码

下面是一个完整的表单组件示例，包含了基础用法和自定义提交按钮的使用：

<!--wxml-->
<view class="container">
  <form bindsubmit="formSubmit" id="myForm">
    <input name="userName" placeholder="请输入用户名" />
    <input type="password" name="password" placeholder="请输入密码" />
    <button form-type="submit">提交</button>
  </form>
  <!-- 自定义提交按钮 -->
  <view class="submit-btn" bindtap="submitForm">提交</view>
</view>

//js
Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  submitForm: function () {
    // 点击自定义提交按钮时，手动触发表单提交事件
    this.selectComponent("#myForm").submitForm()
  }
})