微信小程序中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 相关文章推荐
javascript jq 弹出层实例
Aug 25 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
PHP读取目录下所有文件的代码
2008/01/07 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
nodejs基础应用
2017/02/03 NodeJs
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
如何用Python绘制3D柱形图
2020/09/16 Python
银行实习生自我鉴定范文
2013/09/19 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
中秋节感想
2015/08/10 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL