当前位置：首页 > news >正文

# 小程序 form 表单完整讲解

news 2026/6/17 19:15:11

小程序 form 表单完整讲解

<form catchsubmit="formSubmit" catchreset="formReset">

1. 关键字说明

① `catchsubmit`

触发时机：表单内 button form-type="submit" 点击时执行
catch：阻止事件冒泡（区别于 bindsubmit，bind 会向上冒泡）
绑定函数：formSubmit，表单数据会自动封装进 e.detail.value

② `catchreset`

触发时机：表单内 button form-type="reset" 点击时执行
作用：清空所有输入框、picker 等表单组件的值

2. 完整可运行示例（包含 input、picker、提交、重置）

WXML

<form catchsubmit="formSubmit" catchreset="formReset"><!-- 输入框 --><view class="page-section"><input name="username" placeholder="请输入姓名" /></view><!-- 下拉选择器，必须写 name 才能提交携带值 --><picker name="dept" mode="selector" range="{{partListArray}}" range-key="name" value="{{index}}" bindChange="bindPickerChange"><view wx:if="{{index > -1}}">隶属部门：{{partListArray[index].name}}</view><view wx:else>隶属部门</view></picker><!-- 提交按钮 --><button form-type="submit">提交表单</button><!-- 重置按钮 --><button form-type="reset">重置</button>
</form>

3. 配套 JS

Page({data: {index: -1,partListArray: [{ id: 1, name: '研发部' },{ id: 2, name: '市场部' }]},bindPickerChange(e) {this.setData({ index: e.detail.value })},// 表单提交回调formSubmit(e) {// 所有带 name 的表单组件自动打包在这里const formData = e.detail.value;console.log('表单全部数据：', formData);/*输出格式示例：{username: "用户输入的名字",dept: "选中项下标"}*/// 直接传给后端接口wx.request({url: 'http://192.168.xxx:8000/smart/xxx/',method: 'POST',data: formData,success: res => {wx.showToast({ title: '提交成功' })}})},// 表单重置回调formReset() {console.log('表单已清空');// 手动重置picker下标this.setData({ index: -1 })}
})

4. 必记核心规则

所有表单组件必须加 name 属性
没有 name 的 input / picker / radio 不会被提交携带。
submit 按钮必须标记 form-type="submit"
reset 按钮必须标记 form-type="reset"
catchsubmit vs bindsubmit
- catchsubmit：阻止冒泡，推荐使用
- bindsubmit：事件会冒泡到外层父标签
picker 提交拿到的是选中下标数字，不是 name/id，需要自己根据下标匹配完整对象