uni-app 内置组件：Form

有问题请咨询gpt2023-11-13 8:00

Form 组件是 uni-app 中用于数据提交的容器，它可以包含多个 input、checkbox、radio、slider 等元素，是构建表单的基础。

API

Form 组件本身不提供特别多的 API，主要依赖于内部表单控件的 API。

属性

Form 组件的主要属性如下：

report-submit：是否返回 formId 用于发送模板消息。
validate：是否开启表单验证功能。

事件

Form 组件的主要事件如下：

submit：表单提交事件。调用 event.detail.value 可以获取表单中的数据。
reset：表单重置事件。

示例

HTML 部分：

html 复制代码

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="uni-form-item">
    <view class="uni-label">用户名</view>
    <input class="uni-input" type="text" name="username" placeholder="请输入用户名"/>
  </view>
  <view class="uni-form-item">
    <view class="uni-label">密码</view>
    <input class="uni-input" type="password" name="password" placeholder="请输入密码"/>
  </view>
  <button form-type="submit">提交</button>
  <button form-type="reset">重置</button>
</form>

JavaScript 部分：

javascript 复制代码

export default {
  methods: {
    formSubmit(e) {
      console.log('form发生了submit事件，携带数据为：', e.detail.value);
    },
    formReset(e) {
      console.log('form发生了reset事件');
    }
  }
}

在此示例中，当用户点击提交按钮时，会触发 formSubmit 方法，并打印出表单内的数据。点击重置按钮则会触发 formReset 方法。

请确保为按钮设置 form-type 属性，以区分是提交表单操作还是重置表单操作。

更详细的内容请参考最新的uni-app 官方文档。