位置: IT常识 - 正文
《uni-app》表单组件-form表单(uni-app list)
发布时间：2024-01-08推荐整理分享《uni-app》表单组件-form表单(uni-app list)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uni-app表单提交,uni-app list,uni-app表单提交,uni-app list,uni app table,uniapp 表单,uni-app表格,uni-app表格,内容如对您有帮助，希望把文章链接给更多的朋友！
本文分享的Form组件为uni-app的内置组件Form，非扩展组件，两者在用法上其实大同小异，只是扩展组件的属性以及事件更多…没有本质上的区别～
《uni-app》表单组件-form表单一. 简介二. 基础用法三. @submit事件四. @reset事件五. report-submit属性与report-submit-timeout属性六. 注意事项6.1 校验功能七. demo示例演示7.1 场景说明7.2 demo实现代码八. 小结一. 简介From，表单组件，具有数据收集、提交数据的功能，某种程度上说它就是一个 容器，这个容器内部可以有 input 、checkbox、radio 、picker 等组件填充，原则上所有的表单组件都必须置入from组件，再通过form组件收集内部组件数据并将内容通过接口发送至后台接收～ 通过描述我们可以看出form表单在业务场景中 主要承担的职责 是一个 信息录入 的职能，换句话说，所有信息录入的功能都可以考虑使用form表单来实现，如注册，账号找回，个人信息填写，问卷调查等等~
二. 基础用法基础用法如下：
<form></form>form和绝大多数标签一样是 双标签 的，也就是说它具有闭合标签，因此书写标签时不可遗漏闭合标签，如下这种即是 错误示例：
<!--- 错误示例 ---><form />但这个只是容器，实际开发中不可能会这么使用，毕竟不会有哪个业务场景只有一个壳，而壳里面啥内容都没有，常规示例代码如下：
<form> <view class="form-group"><input placeholder="请输入姓名" /></view> <view class="form-group"> <radio-group > <radio>男</radio> <radio>女</radio> </radio-group> </view></form>示例代码中form组件作为容器，内部具有input输入框以及radio单选框存在，其表现形态 效果图 如下：
三. @submit事件@submit事件，触发后用于 收集内部组件信息，事件说明如下：
属性名类型说明平台差异说明@submitEventHandle携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 为 true 时才会返回 formId
示例代码如下：
<form @submit="formSubmit"> <view class="form-group"><input placeholder="请输入姓名" /></view> <view class="form-group"> <radio-group > <radio>男</radio> <radio>女</radio> </radio-group> </view> <!-- 新增button按钮触发submit事件 --> <view class="form-group"><button form-type="submit">Submit</button></view></form><script>export default {methods: {formSubmit: function(e) {console.log(e);;}}};</script>将from组件绑定 @submit 事件，其值对应一个函数，再通过将 button 的 form-type 设置成 submit 即可实现点击按钮时 联动触发form表单的submit事件，其表现形态 效果图 如下：
其实，到这里还没有完成，当我们按照说明去使用的时候，发现e.detail中并没有如期望的那般获取到对应的值，具体内容如下图
detail中并没有如说明中存在的对应的值，原因是因为form内部的组件必须加上 name属性，示例代码如下：
<form @submit="formSubmit"> <view class="form-group"><input name="input" placeholder="请输入姓名" /></view> <view class="form-group"> <radio-group name="radio"> <radio value="man">男</radio> <radio value="woman">女</radio </radio-group> </view> <!-- 新增button按钮触发submit事件 --> <view class="form-group"><button form-type="submit">Submit</button></view></form>给 input 和 radio 都加上 name属性，加上后其结果如下：
如说明所说，正常获取到预期的值了；
四. @reset事件@reset事件，触发后用于 重制内部组件的值，换句话说，相当于把内部组件的值都给清空掉，事件说明如下：
属性名类型说明平台差异说明@resetEventHandle表单重置时会触发 reset 事件用法和submit基本类似，示例代码如下：
<form @reset="formReset"> <view class="form-group"><input name="input" placeholder="请输入姓名" /></view> <view class="form-group"> <radio-group name="radio"> <radio value="man">男</radio> <radio value="woman">女</radio> </radio-group> </view> <!-- 新增button按钮触发reset事件 --> <view class="form-group"><button form-type="reset">reset</button></view></form>其表现形态 效果图 如下：
同时，@reset对应的事件会在组件的值被清空时同时触发，如现在有一个reset事件，触发时同时弹出弹窗，示例代码如下：
<script>export default {methods: {formReset: function(e) {console.log(e);uni.showModal({content: '触发重制'});}}};</script>其表现形态 效果图 如下：
五. report-submit属性与report-submit-timeout属性report-submit属性 与 report-submit-timeout属性，这是一对 应用于微信小程序中模板消息的属性，属性说明如下：
属性名类型说明平台差异说明report-submitBoolean是否返回 formId 用于发送模板消息(opens new window)微信小程序、支付宝小程序report-submit-timeoutnumber等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId微信小程序2.6.2简单的说，通过页面的 form 组件，属性 report-submit 为 true 时，可以
上一篇：攀牙湾安达曼海的红树林，泰国 (© Ratnakorn Piyasirisorost/Getty Images)(缅甸安达曼海)
下一篇：站在河马身上的锤头鹳，津巴布韦马纳潭国家公园 (© David Fettes/Getty Images)(河马是站在睡觉吗)
