微信小程序 表单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查看html源文件
Nov 08 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
js创建数组的简单方法
Jul 27 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
vue使用codemirror的两种用法
Aug 27 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Django自定义认证方式用法示例
2017/06/23 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
小学教师自我鉴定范文
2014/03/20 职场文书
工伤私了协议书范本
2014/11/24 职场文书
六年级情感作文之500字
2019/10/23 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js