微信小程序中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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
js控制框架刷新
Aug 01 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
ajax异步请求详解
Jan 06 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
vue+element实现打印页面功能
May 20 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php四种基础算法代码实例
2013/10/29 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python requests模块cookie实例解析
2020/04/14 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
实习自我鉴定范文
2013/10/30 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
淘宝店策划方案
2014/06/07 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
中标通知书
2015/04/17 职场文书
春风化雨观后感
2015/06/11 职场文书
在校证明模板
2015/06/17 职场文书
求职自我评价参考范文
2019/05/16 职场文书