热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了微信小程序中form表单提交和取值实例详解的相关资料,需要的朋友可以参考下

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

我们知道,如果我们直接给 input 添加 bindinput,比如:,那么可以在 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 代码



  用户:

  密码:

  兴趣:
    
    
    
  

  级别:
    
    
    
  

  



.js 代码

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

重要说明

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

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

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

表示密码框(个人认为太怪异,不如直接叫 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 中观察值,再来取。

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


推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 微信小程序的核心功能与优势在于其独特的运行环境,区别于传统网页应用,它不依赖于浏览器的BOM和DOM对象,因此无法通过常规的`console.log(window)`或`console.log(document)`获取相关信息。此外,小程序还具备一系列专有特性,如高效的数据绑定、丰富的API接口以及良好的用户交互体验,这些都为开发者提供了更为灵活和强大的开发工具,使得小程序能够更好地适应移动互联网时代的需求。 ... [详细]
  • 本文详细介绍了如何在 Grafana 中独立于 Alertmanager 配置邮件和微信告警。具体步骤包括配置 SMTP 服务器以实现邮件告警,以及设置微信告警的集成方式。通过这些配置,用户可以更灵活地管理和接收来自 Grafana 的告警通知,确保及时响应系统异常。文章还提供了详细的配置示例和常见问题的解决方案,帮助用户顺利完成设置。 ... [详细]
  • 深入解析Gradle中的Project核心组件
    在Gradle构建系统中,`Project` 是一个核心组件,扮演着至关重要的角色。通过使用 `./gradlew projects` 命令,可以清晰地列出当前项目结构中包含的所有子项目,这有助于开发者更好地理解和管理复杂的多模块项目。此外,`Project` 对象还提供了丰富的配置选项和生命周期管理功能,使得构建过程更加灵活高效。 ... [详细]
  • 如何在Java中高效构建WebService
    本文介绍了如何利用XFire框架在Java中高效构建WebService。XFire是一个轻量级、高性能的Java SOAP框架,能够简化WebService的开发流程。通过结合MyEclipse集成开发环境,开发者可以更便捷地进行项目配置和代码编写,从而提高开发效率。此外,文章还详细探讨了XFire的关键特性和最佳实践,为读者提供了实用的参考。 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • SQL 语句的性能优化:你做到了吗?
    在 SQL Server 查询性能优化中,书签查找的作用不容忽视。本文深入探讨了书签查找对查询效率的影响,并提供了实用的优化策略,帮助开发者提升数据库性能。通过具体案例分析,文章展示了如何有效避免不必要的书签查找,从而显著提高查询速度和系统响应时间。 ... [详细]
author-avatar
man_2_瞳皆哥仔
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有