微信小程序 form组件详解及简单实例


Posted in Javascript onJanuary 10, 2017
微信小程序form

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:
微信小程序 form组件详解及简单实例

将表单内的用户输入的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事件')
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
小程序自定义日历效果
Dec 29 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
简单实现php上传文件功能
2017/09/21 PHP
jQuery 1.0.2
2006/10/11 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Python对象转换为json的方法步骤
2019/04/25 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
环境卫生标语
2014/06/09 职场文书
销售经理工作检讨书
2015/02/19 职场文书
行政前台岗位职责
2015/04/16 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS