微信小程序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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
js获取滚动距离的方法
May 30 Javascript
javascript实现动态标签云
Oct 16 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
Home Coffee Roasting
2021/03/03 咖啡文化
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Python Trie树实现字典排序
2014/03/28 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python常见的pandas用法demo示例
2019/03/16 Python
在django view中给form传入参数的例子
2019/07/19 Python
python 项目目录结构设置
2020/02/14 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
中间件的定义
2016/08/09 面试题
个人简历自我鉴定
2013/10/11 职场文书
ktv筹备计划书
2014/05/03 职场文书
安全教育培训心得体会
2016/01/15 职场文书