微信小程序 表单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 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
js操作二级联动实现代码
Jul 27 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
微信小程序 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php 基础函数
2017/02/10 PHP
JavaScript面象对象设计
2008/04/28 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
appium+python adb常用命令分享
2020/03/06 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
秋天的图画教学反思
2014/05/01 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
php引用传递
2021/04/01 PHP