微信小程序 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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
详解vue axios中文文档
Sep 12 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 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获取当前所在目录位置的方法
2014/11/26 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
nodeJS微信分享
2017/12/20 NodeJs
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
详解Python之unittest单元测试代码
2018/01/24 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
pymysql模块使用简介与示例
2020/11/17 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
新娘父亲婚礼致辞
2014/01/16 职场文书
上班看电影检讨书
2014/02/12 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
小学语文复习计划
2015/01/19 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL