微信小程序form表单组件示例代码


Posted in Javascript onJuly 15, 2018

表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击<form/>表单中 formType 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

属性名 类型 说明
report-submit Boolean 是否返回formId用于发送模板消息
bindsubmit EventHandle 携带form中的数据触发submit事件,event.detail = { value : {"name":"value"} , formId:"" }
bindreset EventHandle 表单重置时会触发reset事件

示例代码:

示例代码:

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>
  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>
Page({
 formSubmit: function(e) {
  console.log('form发生了submit事件,携带数据为:', e.detail.value)
 },
 formReset: function() {
  console.log('form发生了reset事件')
 }
})

微信小程序form表单组件示例代码

总结

以上所述是小编给大家介绍的微信小程序form表单组件示例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 #Javascript
简述JS控制台的使用
Jul 15 #Javascript
简述JS浏览器的三种弹窗
Jul 15 #Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 #Javascript
js+SVG实现动态时钟效果
Jul 14 #Javascript
You might like
php 三维饼图的实现代码
2008/09/28 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python2和python3哪个使用率高
2020/06/23 Python
经济学人订阅:The Economist
2018/07/19 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
基层干部十八大感言
2014/01/19 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
教师个人年终总结
2015/02/11 职场文书
Python字符串格式化方式
2022/04/07 Python