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

相关推荐
兰亭妙微UI设计公司2 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
小大宇3 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
潇小墨6 小时前
我给自己造了一个桌面效率助手:剪贴板、截图提单、全盘文件搜索,全都塞进快捷键里
vue.js
jktantan7 小时前
前端也需要事务:Vue Router 乐观更新、回滚与“过期事务”
前端·javascript·vue.js
biu_biubiu8 小时前
我开源了 Codebook
前端·vue.js
小李科技9 小时前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
蓝莓味的口香糖9 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
切糕师学AI9 小时前
el-select-v2 深度解析:用虚拟滚动解决海量数据下拉选择性能瓶颈
前端·vue.js·elementui·el-select-v2
徐小夕10 小时前
JitOffice:把办公、AI 与审批装进同一个平台
前端·vue.js·github
徐小夕10 小时前
万字分享:为什么我们要自研Word解析引擎?JitWord 解析引擎 4.0 深度复盘
前端·vue.js·github