微信小程序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对象的函数
Dec 22 Javascript
javascript编程起步(第四课)
Feb 27 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
AngularJS表单验证功能
Oct 19 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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之header函数详解
2021/03/02 PHP
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Python中无限元素列表的实现方法
2014/08/18 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Python缓存技术实现过程详解
2019/09/25 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
django使用channels实现通信的示例
2020/10/19 Python
css sprite简单实例
2016/05/23 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
全球度假村:Club Med
2017/11/27 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
什么是岗位职责
2013/11/12 职场文书
关于责任的演讲稿
2014/05/20 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
什么是SOLID
2022/03/24 Javascript
windows系统搭建WEB服务器详细教程
2022/08/05 Servers