当前位置: 首页 > 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;拆多少个最终的索引拆分模型演进历程整体迁移流程全量迁移流程流量回放比对验证异步转同步多索引联查优化效果 总结与思考参考 困难 索引数据…...

【SA8295P 源码分析】83 - SA8295P HQNX + Android 完整源代码下载方法介绍

【SA8295P 源码分析】83 - SA8295P HQNX + Android 完整源代码下载方法介绍 一、高通官网 Chipcode 下载步骤介绍1.1 高通Chipcode 下载步骤1.2 高通 ReleaseNote 下载方法二、高通 HQX 代码介绍2.1 完整的 HQX 代码结构:sa8295p-hqx-4-2-4-0_hlos_dev_qnx.tar.gz2.2 sa8295p-…...

【设计模式--原型模式(Prototype Pattern)

一、什么是原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它的主要目的是通过复制现有对象来创建新的对象&#xff0c;而无需显式地使用构造函数或工厂方法。这种模式允许我们创建一个可定制的原型对象&#xff0c;然后通过复制…...

初识 Redis

初识 Redis 1 认识NoSQL1.1 结构化与非结构化1.2 关联和非关联1.3 查询方式1.4. 事务1.5 总结 2 Redis 概述2.1 应用场景2.2 特性 3 Resis 全局命令4 Redis 基本数据类型4.1 String4.1.1 常用命令4.1.2 命令的时间复杂度4.1.3 使用场景 4.2 Hash4.2.1 常用命令4.2.2 命令的时间…...

php灵异事件,啥都没干数据变了?

这篇文章也可以在我的博客查看 搞WordPress&#xff0c;难免跟php打交道 然而这弱类型语言实在坑有点多 这不今儿又踩了个大坑直接时间-1&#x1f605; 问题 话不多说直接上代码 <?php $items [1,2];foreach ($items as &$item) {/*empty loop*/} print_r($items)…...

【ffmpeg】基于需要使用videocapture的opencv编译配置(C++)

目录 配置简介ffmpeg源码编译方法记录gstreamer命令行安装方法opencv的编译项记录 配置简介 opencv使用videocapture读取视频流时&#xff0c;需要借助底层的ffmpeg库。如果不能正确编译&#xff0c;会报错&#xff0c;现记录正确编译配置方法。 ffmpeg源码编译方法记录 ope…...

Redisson分布式锁 原理源码 分析

# 基于setnx实现的分布式锁存在的问题&#xff1a; # 为了解决上面的问题&#xff0c;可以用Redisson # Redisson入门 # Redisson可重入锁原理 获取锁的Lua脚本&#xff1a; 释放锁的Lua脚本&#xff1a; # 锁重试原理分析 tryLock&#xff08;&#xff09;底层代码分析 tim…...

Cocos独立游戏开发框架中的事件管理器

引言 本系列是《8年主程手把手打造Cocos独立游戏开发框架》&#xff0c;欢迎大家关注分享收藏订阅。在独立游戏开发中&#xff0c;事件管理器是一个不可或缺的组件。它为开发者提供了一种灵活的方式来处理游戏内部各种状态变化和用户交互&#xff0c;实现模块之间的解耦和通信…...

keepalived+haproxy 搭建高可用高负载高性能rabbitmq集群

一、环境准备 1. 我这里准备了三台centos7 虚拟机 主机名主机地址软件node-01192.168.157.133rabbitmq、erlang、haproxy、keepalivednode-02192.168.157.134rabbitmq、erlang、haproxy、keepalivednode-03192.168.157.135rabbitmq、erlang 2. 关闭三台机器的防火墙 # 关闭…...

网络安全(黑客)零基础自学

网络安全是什么&#xff1f; 网络安全&#xff0c;顾名思义&#xff0c;网络上的信息安全。 随着信息技术的飞速发展和网络边界的逐渐模糊&#xff0c;关键信息基础设施、重要数据和个人隐私都面临新的威胁和风险。 网络安全工程师要做的&#xff0c;就是保护网络上的信息安…...

如何把本地项目上传github

一、在gitHub上创建新项目 【1】点击添加&#xff08;&#xff09;-->New repository 【2】填写新项目的配置项 Repository name&#xff1a;项目名称 Description &#xff1a;项目的描述 Choose a license&#xff1a;license 【3】点击确定&#xff0c;项目已在githu…...

做蛋糕有哪些网站/西安seo关键词排名优化

说明&#xff1a;还是老话题&#xff0c;不可能完全杜绝&#xff0c;只能减轻。 查看攻击IP 首先使用以下代码&#xff0c;找出攻击者IP netstat -ntu | awk {print $5} | cut -d: -f1 | sort | uniq -c | sort -n 将会得出类似如下的结果&#xff1a; 1 114.226.9.132 1 174.1…...

免费创建网站教程/郑州做网站哪家好

题目描述&#xff1a; 根据一棵树的中序遍历与后序遍历构造二叉树。 注意: 你可以假设树中没有重复的元素。 例如&#xff0c;给出 中序遍历 inorder [9,3,15,20,7] 后序遍历 postorder [9,15,7,20,3] 返回如下的二叉树&#xff1a; 3 / \ 9 20 / \ 15 7 算法…...

wordpress部署/如何快速搭建一个网站

UIStatusBar就是应用最上方显示电池和时间信息的状态栏&#xff0c;宽度与屏幕宽度相等&#xff0c;高度为20.对它的显示控制分两种情况&#xff0c;一种是程序启动时&#xff0c;另一种是程序运行的时候。 1.程序启动时。 在Info.plist 中将Status bar is initially hidden(UI…...

创意响应式网站建设/百度关键词流量查询

Mysql多实例配置成功后&#xff0c;想让配置成开机自启。 首先看一下Linux启动的知识点&#xff0c;顺序如下。 1 加载内核2 执行init程序3 /etc/rc.d/rc.sysinit # 由init执行的第一个脚本4 /etc/rc.d/rc $RUNLEVEL # $RUNLEVEL为缺省的运行模式&#xff0c;linux 共有7种运…...

快速微信网站建设/上海网站关键词排名优化报价

Our study (pp. E275–E284) highlights the importance of directly assaying transcription to understand gene regulation. 我们的研究(pp. E275-E284)强调了直接检测转录对理解基因调控的重要性。 We believe that quantum Fourier analysis, now in its infancy, will h…...

做网站软件是什么下载/西安优化外包

1.IOC控制反转 IoC思想&#xff1a; Inversion of Control&#xff0c;翻译为“控制反转”或“反转控制”&#xff0c;强调的是原来在程序中创建Bean的权利反转给第三方。 例如&#xff1a;原来在程序中手动的去 new UserServiceImpl()&#xff0c;手动的去new UserDaoImpl()&…...