微信小程序中form 表单提交和取值实例详解


Posted in Javascript onApril 20, 2017

微信小程序中form 表单提交和取值实例详解

我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即:

onUsernameInput : function(e) {
  e.detail.value;
}

但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput、bindchange 这类方法来获取值。我们得这样做:

第一步、添加 from 控件,并为其指定 bindsubmit 属性值。
第二步、添加输入控件到 form 中,并为其指定 name 属性值。
第三步、添加 button 控件,并为其指定 form-type="submit"。
第四步、在 js 中取值时,用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 为 name 属性值。

.wxml 代码

<form bindsubmit="reg">

  <view>用户:<input type="text" name="username" /></view>

  <view>密码:<input password name="password" /></view>

  <view>兴趣:<checkbox-group name="cb">
    <label><checkbox value="A" />乒乓球</label>
    <label><checkbox value="B" checked="false" />羽毛球</label>
    <label><checkbox value="C" checked="{{checked}}" />排球</label>
  </checkbox-group></view>

  <view>级别:<radio-group name="r">
    <label><radio value="a" />初级</label>
    <label><radio value="b" />中级</label>
    <label><radio value="c" />高级</label>
  </radio-group></view>

  <view><button type="primary" form-type="submit">注册</button></view>

</form>

.js 代码

reg: function(e) {
  console.log(e.detail.value);
  
  wx.showToast({
    title: e.detail.value["cb"].join(","),
    icon: "success",
    duration: 2000
  });
}

重要说明

<input type="text" 中的 type 和 HTML 中的不同,

微信小程序的 input 有个属性叫 type,这个 type 有几个可选值:

text:不必解释
number:数字键盘(无小数点)
idcard:数字键盘(无小数点、有个 X 键)
digit:数字键盘(有小数点)

注意:number 是无小数点的,digit 是有小数点的。我严重怀疑这是个 BUG。

<input password /> 表示密码框(个人认为太怪异,不如直接叫 password 标签的好)。

“羽毛球”那一项,我们是故意写作 checked="false" 的,我们试图使之初始不选中,但是不如我们愿,它却选中了,这和 HTML 一样,并不认 checked 属性值,只认有没有这个标记。不过如果我们使用 {{}} 则不一样,比如“排球”一项,选中与否就受 data.checked 的影响。

input 的取值如前面所述,用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 为 name 属性。

checkbox 的取值也是类似 input,不过 xxx 为 checkbox-group 的 name,取出来的值是数组,由选中项的 value 组成,比如选中了“乒乓球”、“排球”,结果就是:["1", "3"]。特别说明,这个顺序与我们选择的先后有关,比如我们先选择“排球”,再选择“乒乓球”,结果就是["3", "1"]。

radio 的取值和 input 一样,返回的是选中的那一项的 value,没有选中项就是 ""。

如果不知道值类型,也可用 console.log(e.detail.value); 将所有值输出来,然后在调试 Console 中观察值,再来取。

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

Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JavaScript严格模式详解
Nov 18 Javascript
javascript事件模型介绍
May 31 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
微信小程序实现日历效果
Dec 28 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
ES6新特性一: let和const命令详解
Apr 20 #Javascript
javascript 正则表达式分组、断言详解
Apr 20 #Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
JS利用cookies设置每隔24小时弹出框
Apr 20 #Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 #Javascript
addEventListener()与removeEventListener()解析
Apr 20 #Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python合并多个装饰器小技巧
2015/04/28 Python
详解Python装饰器由浅入深
2016/12/09 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
应聘教师自荐信
2013/10/12 职场文书
保护黄河倡议书
2014/05/16 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL