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

相关推荐
正在学习前端的---小方同学2 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享3 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
前端开发爱好者9 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀10 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
华仔啊12 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆13 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
岁月宁静14 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
Dolphin_海豚14 小时前
@vue/reactivity
前端·vue.js·面试
菜狗的小小笔记_15 小时前
Vue3 实用技巧
vue.js
勇敢di牛牛18 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js