微信小程序 表单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 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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模板引擎SMARTY
2006/10/09 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php关联数组快速排序的方法
2015/04/17 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
浅谈JavaScript 声明提升
2020/09/14 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
接口可以包含哪些成员
2012/09/30 面试题
怎样写好自我鉴定
2013/12/04 职场文书
小学语文课后反思精选
2014/04/25 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
酒店员工管理制度
2015/08/05 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
人民币符号
2022/02/17 杂记
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技