uni-app 内置组件:Form

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 官方文档

相关推荐
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode10 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
武昌库里写JAVA13 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala14 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy14 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘15 小时前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021115 小时前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依15 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui