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

相关推荐
OpenTiny社区1 小时前
多会话 + 流式输出怎么落地?TinyRobot Kit 对话数据层深度解析
前端·vue.js
破烂三角裤4 小时前
Vue 3 自动生成汉字拼音:pinyin-pro、Ruby 标签
vue.js
顽疲4 小时前
java vue springboot 养老系统源码详解:退住 care_out 审批结算与腾床事务实践
java·vue.js·spring boot·vue养老·springboot养老·java养老
雪芽蓝域zzs4 小时前
第 10 节:地图点击逆地理编码(点击地图获取经纬度 + 地址)
vue.js
斯内普吖4 小时前
(开源)线上花店系统实战指南 基于 Java + SSM + Vue + MySQL
java·vue.js·mysql·开源
溪语流沙6 小时前
【Web全栈进阶】Vue Router + Pinia:SPA路由与全局状态
前端·javascript·vue.js
u0111026757 小时前
WebP 转成 PNG 后为什么更大?图片格式转换不等于压缩
前端·javascript·vue.js
seconp7 小时前
基于Spring Boot和Vue 3的智慧旅游网站:住宿预订、行程规划与千问接入
vue.js·spring boot·毕业设计·软件工程·课程设计·旅游·毕设
daols888 小时前
vue 甘特图组件 vxe-gantt 修改滚动条样式-让滚动条自动隐藏
javascript·vue.js·甘特图
特立独行的猫A9 小时前
仓颉UI开发实战:我用仓颉写了个桌面版力扣:从判题机到 100 道题
vue.js