微信小程序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 相关文章推荐
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
jquery实现全屏滚动
Dec 28 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
ztree+ajax实现文件树下载功能
May 18 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php Memcache 中实现消息队列
2009/11/24 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php获取文件大小的方法
2014/02/26 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
JS数组去重的6种方法完整实例
2018/12/08 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
理解Python中函数的参数
2015/04/27 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python解析json代码实例解析
2019/11/25 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
小学生演讲稿
2014/01/12 职场文书
成龙洗发水广告词
2014/03/14 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
银行贷款委托书范本
2014/10/11 职场文书
音乐教师个人总结
2015/02/06 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python