微信小程序 表单Form实例详解(附源码)


Posted in Javascript onDecember 22, 2016

微信小程序 表单Form实例

表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用

form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件的值。其主要属性:

微信小程序 表单Form实例详解(附源码)

主要代码,创建一个form表单:

<!--pages/index/Component/FormM/FormM.wxml-->
<view class="viewTitle">
  <text class="view-Name">form表单</text>
  <view class="lineView"></view>
</view>
<!--这里用form,name=“nameName1”可以作为form的属性进行 
(e.detail.value.nameName1)调用,
form自带有提交和重置按钮,会自动获取表单中所有控件值的改变-->
<form class="page__bd" 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 value="50" name="slider" show-value ></slider>
  </view>
  <view class="section">
   <view class="section__title">input输入框</view>
   <input name="input" style="background-color: #FFFFFF" placeholder="请在这里输入" />
  </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="section">
   <view class="section__title">地区选择器</view>
   <picker name="areaPicker" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
     当前选择:{{array[index]}}
    </view>
   </picker>
  </view>
  <view class="section">
   <view class="section__title">时间选择器</view>
   <picker name="timePicker" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
     当前选择: {{time}}
    </view>
   </picker>
  </view>
  <view class="section">
   <view class="section__title">日期选择器</view>
   <picker name="datePicker" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
     当前选择: {{date}}
    </view>
   </picker>
  </view>
  <view class="btn-area">
   <button form-type="submit">Submit提交</button>
   <button form-type="reset">Reset重置</button>
  </view>
 </form>

如何获取form内部的控件的值,就需要用到form的相关属性,代码如下

// pages/index/Component/FormM/FormM.js
Page({
 //初始化数据
 data: {
  array: ['大中国', '美国', '巴西', '小日本'],
  index: 0,
  date: '2016-12-20',
  time: '11:19',
  allValue:''
 },
 //表单提交按钮
 formSubmit: function(e) {
  console.log('form发生了submit事件,携带数据为:', e.detail.value)
  this.setData({
   allValue:e.detail.value
  })
 },
 //表单重置按钮
 formReset: function(e) {
  console.log('form发生了reset事件,携带数据为:', e.detail.value)
  this.setData({
   allValue:''
  })
 },
 //---------------------与选择器相关的方法
 //地区选择
 bindPickerChange: function(e) {
  console.log('picker发送选择改变,携带值为', e.detail.value)
  this.setData({
   index: e.detail.value
  })
 },
 //日期选择
 bindDateChange: function(e) {
  this.setData({
   date: e.detail.value
  })
 },
 //时间选择
 bindTimeChange: function(e) {
  this.setData({
   time: e.detail.value
  })
 },


})

效果图:

微信小程序 表单Form实例详解(附源码)   微信小程序 表单Form实例详解(附源码)   微信小程序 表单Form实例详解(附源码)   微信小程序 表单Form实例详解(附源码)

输出表单中的结果值:

微信小程序 表单Form实例详解(附源码)

源码下载:http://xiazai.3water.com/201612/yuanma/WX-form-Demo4-master(3water.com).rar

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

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
js 判断 enter 事件
Feb 12 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 #Javascript
JS闭包与延迟求值用法示例
Dec 22 #Javascript
jQuery实现两个select控件的互移操作
Dec 22 #Javascript
JS 调用微信扫一扫功能
Dec 22 #Javascript
Vue实现双向绑定的方法
Dec 22 #Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 #Javascript
Vue.js双向绑定实现原理详解
Dec 22 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python 获取图片分辨率的方法
2019/01/08 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python新手学习raise用法
2020/06/03 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
会计专业推荐信
2013/10/29 职场文书
语文课外活动总结
2014/08/27 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
校园安全教育心得体会
2016/01/15 职场文书