微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(ID:itclanCoder)
如果不知道如何操作
点击这里,标星不迷路
背景
在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有:switch
,input
,checkbox
,slider
,radio
,picker
)等,通过触发事件,然后提交给后端处理
那么在小程序当中有哪些方式可以获取到表单中的值呢,又怎么通过非表单提交的方式获取用户输入框中的值呢
换言之,若提交按钮在form
之外,又如何实现表单的提交呢
在小程序中有两种方式可以获取表单的值
form 表单获取表单组件的值
这是最普遍通用的一种方法,所有用户输入的组件放置在form
内,当点击form
表单中form-type
为submit
的button
组件时
它会将表单组件中的value
值进行提交,但此时需要在表单组件中加上name
来作为key
如下 UI 所示:
<view class="container"><form bindsubmit="formSubmit"><view><view class="title">switch</view><switch checked name="switchChecked" /></view><view><view class="title">radio</view><radio-group name="radio"><label><radio checked value="boy" />男</label><label><radio value="girl" />女</label></radio-group></view><view><view class="title">checkbox</view><checkbox-group name="checkbox"><label><checkbox checked value="itclanCoder" />itclanCoder</label><label><checkbox value="itclan" />itclan</label></checkbox-group></view><view><view class="title">slider</view><slider value="50" name="slider" show-value></slider></view><view><inputclass="input"value="{{inputVal}}"name="input"placeholder="这是一个输入框"/></view><view><button class="submitBtn" size="default" type="primary" formType="submit">提交</button></view></form>
</view>
以下是wxss
代码
/* pages/getformdata/getformdata.wxss */
.container {padding: 15rpx 40rpx;
}.title {margin: 20rpx 0;
}label {margin-right: 50rpx;
}.input {border-bottom: 1px solid #abcdef;
}.submitBtn {margin-top: 40rpx;
}button:not([size='mini']) {width: 100% !important;
}
在上面的示例代码中,你会发现当有多个radio
,多个checkbox
时,它会被包裹在radio-group
,checkbox-group
中,不然是无法获取到控件中的具体数值的,当然也不是说非得包裹,那只能使用第二种方法获取控件中的值
其中表单中的switch
,radio
,checkbox
中的checked
并不是必须的,可以填写一个默认初始值,进行控制,在本文示例中,我是给了一个初始值
在form
表单中绑定了bindsubmit事件方法,它会携带form
中的数据触发submit
事件
同时form
表单内的button
按钮中的formType
绑定了submit
事件,它是用于form
表单组件提交的,会触发form
组件的submit
(提交表单)/reset
(重置表单)事件
下面来看看逻辑代码:
// pages/getformdata/getformdata.js
Page({/*** 页面的初始数据*/data: {inputVal: '123',},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},// 表单提交formSubmit(event) {console.log(event); // event.detail.value就可以拿到具体表单中的值const {switchChecked,radio,checkbox,slider,input,} = event.detail.value; // 解构console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"},
});
以上通过form
表单,获取表单中控件的值,是通过在switch
,radio-group
,checkbox-group
,slider
,input
组件中添加name
属性,从而通过button
中的formType
结合form
的bindsubmit
事件,就可以统一的拿到表单组件中的值
当你拿到表单中的值,就可以继续后面的操作,传值,把对应的字段提交给后台处理,就可以了的
优点: 传统的表单提交方式,通过在表单控件内设置name
的值,在表单统一提交时,就可以通过event.detail.value
拿到表单中各个表单组件的值,代码量少,简单
缺点: 处于form
表单之外的其他表单控件值是无法拿到的,button
按钮页必须要在form
内,并且写法固定
下面介绍一种非表单提交方式,也就是不依赖form
,同样也可以获取到表单组件的各个数值
这种应用场景在小程序中是很常见的,表单提交数据,不一定就非得是button
按钮的方式,只要能拿到表单组件中的值,就达到目的了的
非表单方式获取表单组件的值
下面是实例效果
以下是实例代码,代码与上面类似,只是稍微更改了一下
去除了表单form,name
属性,在表单组件中新增了bindchange
方法
<!--pages/getformdata/getformdata.wxml-->
<view class="container"><view><view><view class="title">switch</view><switch checked bindchange="handleSwitch" /></view><view><view class="title">radio</view><!-- radio-group是不能少的,否则就会出问题的,下面的checkbox-group也是 --><radio-group bindchange="handleRadio"><label><radio checked value="boy" />男</label><label><radio value="girl" />女</label></radio-group></view><view><view class="title">checkbox</view><checkbox-group bindchange="handleCheckBox"><label><checkbox checked value="itclanCoder" />itclanCoder</label><label><checkbox value="itclan" />itclan</label></checkbox-group></view><view><view class="title">slider</view><sliderbindchange="handleSlideChange"value="{{sliderVal}}"show-value></slider></view><view><inputbindinput="handleInputChange"class="input"value="{{inputVal}}"placeholder="这是一个输入框"/></view><!-- 此处并非用的button按钮,照样可以提交表单数据 --><view><view class="submitBtn" bindtap="handleSubmit">提交</view></view></view>
</view>
当在switch
,radio-group
,checkbox-group
,slider
,input
中添加了bindchange
方法,checked
,input
发生改变时就会触发 change
事件,然后通过携带事件对象,拿到表单组件对应的具体数值
如下代码所示
// pages/getformdata/getformdata.js
Page({/*** 页面的初始数据*/data: {switchVal: true, // switch默认初始化值radioVal: 'boy', // radio初始化值,有时候男女,也可以用1,0等表示男,女的checkboxVal: 'itclanCoder', // checkbox初始化值sliderVal: 30,inputVal: '123', // 输入框初始化值},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},// switch中的值handleSwitch(event) {console.log(event);const switchVal = event.detail.value;this.setData({// 通过setData更改数据switchVal,});},// 触发readiohandleRadio(event) {console.log(event);const radio = event.detail.value;this.setData({radioVal: radio,});},// 触发checkboxhandleCheckBox(event) {console.log(event);const checkbox = event.detail.value;this.setData({checkboxVal: checkbox,});},// 触发slideChangehandleSlideChange(event) {console.log(event);const sliderVal = event.detail.value;this.setData({sliderVal: sliderVal,});},// input输入框的值handleInputChange(event) {console.log(event);const inputVal = event.detail.value;this.setData({inputVal: inputVal,});},// 表单提交handleSubmit() {console.log(this.data.switchVal,this.data.radioVal,this.data.checkboxVal,this.data.sliderVal,this.data.inputVal); // true "boy" "itclanCoder" 30 "123"},
});
以上就是通过非表单提交的方式获取表单组件中的值,此方法不局限于form
表单,比较灵活,先初始化表单,然后给表单组件绑定bindchange
事件
当表单组件checked
,或input
发生改变时,就会触发change
事件,然后通过事件对象就可以拿到表单组件的值
在bindchange
事件的方法内,重新setData
一次数据就可以了的
优点:非表单form,button组合方式方式提交数据,比较灵活(在表单form
之外也能提交数据)
缺点: 需要添加绑定bindchange
事件,需要触发setData
,但频繁的触发setData
是比较消耗性能,在表单组件不是很多的情况下,可以选用此方式
注意
传统form提交数据时,必须要设置name来作为key,否则就拿不到表单组件中的值,而非form表单形式提交数据,需要给表单组件绑定bindchang,通过事件对象的方式获取组件中的数据
这个是有应用场景的,比如:如下下面小程序中我的页面爱的鼓励页面中,的就是用非表单方式提交数据的,有些时候,不一定就要非用form表单提交的方式,都有对应的应用场景
(打开小程序-爱的鼓励页面中的表单用的就是非form提交方式)
总结
全文总结两段话就是:
小程序中获取表单组件的值有两种方式,一种是通过传统的form结合button组合的方式,这种方式有局限性,所有的表单组件都需要在form内,通过在表单组件内设置name值的方式获取表单组件中的值(必须要设置,否则拿到表单组件的值就是`undefined`)
另一种是非表单
form
提交数据的方式是通过在表单组件上绑定bindchange事件,通过事件对象的方式,获取event.detail.value
的方式即可拿到,但同时牺牲性能为代价,需要触发setData,从而在最终提交表单时,拿到具体的表单数值
相关参考文档
form 表单组件https://developers.weixin.qq.com/miniprogram/dev/component/form.html
记账就用轻记账
公众号(ID:itclanCoder)
码能让您早脱菜籍,文能让您洗净铅华
可能您还想看更多:
小程序-云开发-实现生成小程序码
Js篇-面试题12-如何解析 URL 提取 params 参数
Js篇-面试题11-比较下for..of与for..in的区别
Js篇-面试题9-请说一下Js中的事件循环机制
vuepress建站过程中遇到的一些问题
微信小程序-如何获取用户表单控件中的值相关推荐
- 微信小程序之获取用户基本信息
微信小程序之获取用户基本信息 一.使用Redis存储access-token package com.qfjy.project.weixin.api.accessToken;import com.qf ...
- 微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息 方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
- php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
- 微信小程序 getPhoneNumber获取用户手机号
微信小程序 getPhoneNumber获取用户手机号 在使用getPhoneNumber前,可以先看下官方文档:文档地址 在注意这里,官方提到如果不使用之前wx.login调用获取的sessionK ...
- 微信小程序 访问ip服务器,微信小程序如何获取code?微信小程序如何获取用户ip?...
微信小程序如何获取code?微信小程序如何获取用户ip?最近小编收到很多问题,其中一个就是下面小编为大家整理一下关于微信小程序如何获取code的步骤,希望这些方法能够帮助到大家. 首先,调用 wx.l ...
- 微信小程序——最新获取用户昵称和头像的方法总结
前段时间微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下 首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统 ...
- 微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档 登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...
- 微信小程序授权 获取用户信息
微信小程序授权 获取用户信息 小程序昵称突然变成了"微信用户",头像也不显示, <!-- 近期很多小伙伴通过该方法获取头像和昵称,代码也没有做改变,突然就变成了下面这样子 - ...
- 表达式 控件 html,获取HTML表单控件的UrlEncode字符串表达式
/** * * UrlEncode * http://www.cnitblog.com/9jian/ * * 获取 Input(checkbox,radio,text,password).Tex ...
最新文章
- 「杂谈」如何写好R语言apply家族函数
- 怎么制作营销型网站才能有效提升优化效果?
- wgrib读grib数据
- jquery中邮箱地址 URL网站地址正则验证实例代码
- java redis缓存使用_java使用redis缓存数据库
- 力扣235. 二叉搜索树的最近公共祖先(JavaScript)
- java 标签时间format_fmt:formatDate 标签
- python pip_Python PIP
- 一点创业想法:读书类垂直博客
- bootstrap 黑边框表格样式_bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)...
- 易筋SpringBoot 2.2 | 第三十二篇:Redis Docker入门
- 大白话解析模拟退火算法、遗传算法
- MacOS上MPV播放器常用快捷键(增加画面旋转快捷键)
- H5拖拽方法drag在VUE中的应用实例
- java数字时钟代码_Java编程小实例—数字时钟的实现代码示例
- 音频处理工具SOX详解
- Zemax-多重结构的公差分析
- MySQL无法启动 系统发生1058错误
- mysql8.0.21官网安装步骤_MySQL8.0.21安装步骤及出现问题解决方案
- MFC编辑框数据读写