当前位置: 首页 > news >正文

微信小程序的form表单提交

获取input有两种方法:

第一:bindsubmit方法
注意:
1.使用form里面定义bindsubmit事件
2.bindsubmit事件需要配合button里面定义的formType=“submit” 操作
3.设置input的name值来获取对应的数据

<form bindsubmit="formSubmit"><input type="text" name="name" class="content" placeholder="请输入司机姓名" /><input type="text" name="plateNo" class="content" placeholder="请输入车牌号" /><button class="wehx-foot-btn" hover-class="wehx-button_hover" formType="submit">确定</button>
</form>

通过e.detail.value获取数据, 其中包含input的value值

formSubmit: function (e) {console.log(e.detail.value)let name= data.detail.value.namelet plateNo= data.detail.value.plateNo;
}

第二种:bindinput方法
注意:
1.在input框内使用bindinput属性的方式定义事件名称
2.事件是光标移动发生数据改变,数据自动获取

<input type="text" bindinput='getInputName'  name="name" class="content" placeholder="请输入司机姓名" />

通过e.detail获取数据, 其中包含input的value值、光标的位置cursor

getInputName:function(e){console.log(e.detail)// 获取到input的值let name = e.detail.value;// 获取到光标的位置let local = e.detail.cursor;
}

参考:微信小程序之 获取input框输入值

form表单提交

<form bindsubmit="formSubmit" bindreset="formReset"><view class="section section_gap"><view class="section__title">是否公开信息</view><switch name="isPub" /></view><view class="section"><view class="section__title">手机号</view><input name="phone" placeholder="手机号" /></view><view class="section"><view class="section__title">密码</view><input name="pwd" placeholder="密码" password/></view><view class="section section_gap"><view class="section__title">性别</view><radio-group name="sex"><label><radio value="" checked/></label><label><radio value="" /></label></radio-group></view><view class="btn-area"><button formType="submit">提交</button><button formType="reset">重置</button></view>
</form>
<view wx:if="{{isSubmit}}">{{warn ? warn : "是否公开信息:"+isPub+",手机号:"+phone+",密码:"+pwd+",性别:"+sex}}
</view>
.section{display: flex;flex-direction: row;margin: 20rpx;
}
.section view{margin-right: 20rpx;
}
.btn-area{margin: 20rpx;
}
button{margin: 10rpx 0;
}
let app = getApp();
Page({data: {isSubmit: false,warn: "",phone: "",pwd: "",isPub: false,sex: "男"},formSubmit: function (e) {console.log('form发生了submit事件,携带数据为:', e.detail.value);let { phone, pwd, isPub, sex } = e.detail.value;if (!phone || !pwd) {this.setData({warn: "手机号或密码为空!",isSubmit: true})return;}this.setData({warn: "",isSubmit: true,phone,pwd,isPub,sex})},formReset: function () {console.log('form发生了reset事件')}
})

参考:微信小程序-form表单提交

注意几个点:
实现过程分为以下几步
1.给 form 表单设置 bindsubmit 属性。
2.给所有 input / check等等项 设置 name 属性 (否则无法获取值)
3.给按钮设置 form-type="submit”,与第一步 form 设置的 bindsubmit 属性值 绑定
4.编写按钮触发的函数 (第一步与第三步共同绑定的)

相关文章:

微信小程序的form表单提交

获取input有两种方法&#xff1a; 第一&#xff1a;bindsubmit方法 注意&#xff1a; 1.使用form里面定义bindsubmit事件 2.bindsubmit事件需要配合button里面定义的formType“submit” 操作 3.设置input的name值来获取对应的数据 <form bindsubmit"formSubmit"…...

WOFOST模型与PCSE模型应用

实现作物产量的准确估算对于农田生态系统响应全球变化、可持续发展、科学粮食政策制定、粮食安全维护都至关重要。传统的经验模型、光能利用率模型等估产模型原理简单&#xff0c;数据容易获取&#xff0c;但是作物生长发育非常复杂&#xff0c;中间涉及众多生理生化过程&#…...

5-W806-RC522-SPI

main.c #include <stdio.h> #include "wm_hal.h" #include "rc522.h"int main(void) {SystemClock_Config(CPU_CLK_160M);printf("enter main\r\n");HAL_Init();RC522_Init();PcdReset();M500PcdConfigISOType ( A );//设置工作方式IC_te…...

Python实现自动登录+获取数据

前言 Dy这个东西想必大家都用过&#xff0c;而且还经常刷&#xff0c;今天就来用代码&#xff0c;获取它的视频数据 环境使用 Python 3.8 Pycharm 模块使用 requests selenium json re 一. 数据来源分析 1. 明确需求 明确采集网站以及数据内容 网址: https://www.dy.co…...

yolov8热力图可视化

安装pytorch_grad_cam pip install grad-cam自动化生成不同层的bash脚本 # 循环10次&#xff0c;将i的值从0到9 for i in $(seq 0 13) doecho "Running iteration $i";python yolov8_heatmap.py $i; done热力图生成python代码 import warnings warnings.filterwarn…...

【SpringBoot】第一篇:redis使用

背景&#xff1a; 本文是教初学者如何正确使用和接入redis。 一、引入依赖 <!--redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><depen…...

Springboot profile多环境配置

1. 前言 profile用于多环境的激活和配置&#xff0c;用来切换生产&#xff0c;测试&#xff0c;本地等多套不通环境的配置。如果每次去更改配置就非常麻烦&#xff0c;profile就是用来切换多环境配置的。 2. 配置方法 三种方式。 2.1 多profile文件方式 在resource目录下新…...

(1)进程与线程区别

1.什么是线程、进程 进程&#xff1a;操作系统资源分配的基本单位线程&#xff1a;处理器任务调度和执行的基本单位。 一个进程至少有一个线程&#xff0c;线程是进程的一部分&#xff0c;所以线程也被称为轻权进程或者轻量级进程。 2.并行与并发 一个基本的事实前提&#x…...

学习JAVA打卡第四十天

对象的字符串表示 在此类中我们讲过&#xff0c;所有的类都默认是java.lang包中object类的子类或间接子类。 Object类有一个public String toString&#xff08;&#xff09;方法,一个对象通过调用该方法可以获得该对象的字符串表示。一个对象调用toString法&#xff08;&…...

【跟小嘉学 Rust 编程】十四、关于 Cargo 和 Crates.io

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…...

防关联指纹浏览器:高效地管理你的Facebook账户

Facebook&#xff0c;作为全球最受欢迎社交平台的第一名已经成为我们日常和工作中不可或缺的一部分了。不管是用于日常分享、媒体营销、还是店铺运营&#xff0c;Facebook都占据着重要的位置。多个Facebook账户的优势非常明显&#xff0c;然而&#xff0c;当你需要同时管理他们…...

前端学习记录~2023.8.15~JavaScript重难点实例精讲~第7章 ES6(1)

第 7 章 ES6 前言7.1 let关键字和const关键字7.1.1 let关键字&#xff08;1&#xff09;let关键字的特性&#xff08;2&#xff09;使用let关键字的好处 7.1.2 const关键字&#xff08;1&#xff09;const关键字的特性 7.2 解构赋值7.2.1 数组的解构赋值&#xff08;1&#xff…...

WebSocket详解以及应用

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;websocket、网络、长连接、前端☀️每日 一言&#xff1a;任何一个你不喜欢而又离不开的地方&#xff0c;任何一种你不喜欢而又无法摆脱的生活&#xff0c;都是监狱&#xff01; 一、前言 我们在…...

如何评估开源项目的活跃度和可持续性?

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

远程Linux/ubuntu服务器后台不间断运行py文件/sh脚本

通常我们在生产环境中运行一些项目时需要将程序不间断的运行在服务器上&#xff0c;并且将日志文件打印到某个文件中&#xff0c;直到程序运行结束&#xff0c;下面介绍了在Linux服务器上不间断运行py文件的方式&#xff0c;以及如何保存相应的日志信息。 对于 .py 文件&#x…...

记录一个诡异的bug

将对接oa跳转到会议转写的项目oa/meetingtranslate项目发布到天宫&#xff0c;结果跳转到successPage后报错 这一看就是successPage接口名没对上啊&#xff0c;查了一下代码&#xff0c;没问题啊。 小心起见&#xff0c;我就把successPage的方法请求方式从Post改为Get和POST都…...

Xamarin.Android中的Fragment

目录 1、Activity中使用Fragment2、Fragment与Activity通信3、Fragment与其他的Fragment通信 1、Activity中使用Fragment 一般而言&#xff0c;会在activity中添加一个加载fragment的方法。通过点击菜单的按钮&#xff0c;加载不同的fragment。其样子一般是这样的&#xff1a;…...

portainer初体验

官方文档 安装 docker 这里采用的的是国内汉化的一个镜像&#xff0c;版本号2.16.2。 地址 docker run -d --restartalways --name"portainer" -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock 6053537/portainer-ce体验 访问9000端口。 尝试&#x…...

4G数传方案(合宙cat1模块)

一. 合宙Cat1简介 合宙 Air724 模组推出的低功耗&#xff0c;超小体积&#xff0c;高性能嵌入式 4G Cat1 核心版&#xff0c;标准的 2.54 排针、最小成本的进项 2G、4G Cat4 切换&#xff1b;主要功能如下: 实际测试工作环境为-35℃-75℃&#xff1b; 支持 5-12V 供电或者 3.7…...

ElasticSearch - 海量数据索引拆分的一些思考

文章目录 困难解决方案初始方案及存在的问题segment merge引入预排序 拆分方案设计考量点如何去除冗余数据按什么维度拆分&#xff0c;拆多少个最终的索引拆分模型演进历程整体迁移流程全量迁移流程流量回放比对验证异步转同步多索引联查优化效果 总结与思考参考 困难 索引数据…...

CNAS实验室一份完整的质量手册需要包含哪些要素?一文教会质量手册编写

编写质量管理体系文件是CNAS实验室认证工作中非常重要的一个环节&#xff0c;实验室质量管理体系文件按照惯例&#xff0c;一般会分为四个层级&#xff0c;质量手册、程序文件、作业指导书和记录文件。实验室质量手册是实验室依据相关标准制定的纲领性文件&#xff0c;系统规定…...

别再傻傻分不清!PECL、CML、LVDS三种高速差分接口,硬件工程师选型避坑指南

高速差分接口选型实战&#xff1a;PECL、CML、LVDS的工程化决策指南 当PCB布线密度突破8层板、信号速率迈入Gbps时代&#xff0c;差分接口的选择直接决定系统稳定性。某通信设备厂商曾因误用LVPECL接口导致整批产品EMC测试失败&#xff0c;损失超百万——这类故事在硬件圈屡见不…...

自动化测试的未来:AI测试会取代人工测试吗

一、AI浪潮下的测试行业变局在软件测试行业的发展历程中&#xff0c;自动化测试的出现曾被视为提升效率的关键转折点&#xff0c;而如今&#xff0c;AI技术的深度介入&#xff0c;正在将这场变革推向新的高度。从AI自动生成测试用例&#xff0c;到智能预测高风险代码模块&#…...

[实测可用 v2.7.5] 桌面端 Open Claw 搭建流程全程图文教程

前言 2026 年开源圈热门的「数字员工」OpenClaw&#xff08;昵称小龙虾&#xff09;&#xff0c;GitHub 星标突破 28 万&#xff0c;凭借本地运行 零代码操作 自动干活的核心优势广受关注&#xff01;很多人误以为它是普通聊天 AI&#xff0c;实则是能真正操控电脑的自动化神…...

别再只盯着ADC了!74HC4067的另类玩法:DIY一个简易多路信号切换器与逻辑分析仪探头

74HC4067的创意实践&#xff1a;打造多功能信号切换与逻辑分析工具 在电子设计与调试过程中&#xff0c;多路信号切换和逻辑分析是两项基础但至关重要的任务。传统解决方案往往需要昂贵的专业设备&#xff0c;而本文将展示如何利用常见的74HC4067芯片&#xff0c;配合开源硬件和…...

Win10下通过桥接网卡实现QEMU虚拟机与宿主机及外网的无缝互联

1. 为什么需要桥接网卡&#xff1f; 在Windows 10环境下使用QEMU创建虚拟机时&#xff0c;很多朋友都会遇到一个头疼的问题&#xff1a;虚拟机虽然能上网&#xff0c;但宿主机和虚拟机之间就是无法互相访问。这种情况我遇到过太多次了&#xff0c;特别是需要调试web服务或者进行…...

《深入理解Linux网络技术内幕》全套学习资料合集

目录 第一部分 全书分章节课后习题标准答案第二部分 配套全套Demo源码&#xff08;内核模块应用层C程序&#xff09;第三部分 Linux内核TCP协议栈逐行源码深度解析第四部分 书本知识点 → RK3588硬件落地实战教程第一部分 分章节课后练习题标准答案 第1章 Linux网络体系架构 一…...

HPM6750 BGA196封装XPI0 CA端口缺失的CB端口启动解决方案

1. 项目概述与核心挑战最近在做一个对PCB尺寸有严格限制的嵌入式项目&#xff0c;主控芯片选用了先楫半导体的高性能MCU HPM6750。为了压缩板子面积&#xff0c;我放弃了引脚更丰富的BGA289封装&#xff08;HPM6750IVM2&#xff09;&#xff0c;转而选择了更紧凑的BGA196封装&a…...

别再硬着头皮写测试了!用Mockito 4.x搞定Spring Boot单元测试的5个真实场景

告别低效测试&#xff1a;Mockito 4.x在Spring Boot中的5个实战技巧 在Java开发领域&#xff0c;单元测试是保证代码质量的重要环节&#xff0c;但面对Spring Boot这样功能强大的框架&#xff0c;测试工作常常变得复杂而低效。依赖注入、数据库交互、外部服务调用等因素让测试代…...

基于朴素贝叶斯算法的情感文本分析与分类:快速上手情感分析

基于朴素贝叶斯算法的情感文本分析与分类&#xff1a;快速上手情感分析 【下载地址】基于朴素贝叶斯机器学习算法的情感文本分析与分类 本资源文件提供了一个基于朴素贝叶斯机器学习算法的情感文本分析与分类的实现。该实现包含了数据集和预训练的中文分词模型&#xff0c;帮助…...