微信小程序的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.编写按钮触发的函数 (第一步与第三步共同绑定的)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/54266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day43|leetcode 1049.最后一块石头的重量II、494.目标和、474.一和零

leetcode 1049.最后一块石头的重量II 题目链接&#xff1a;1049. 最后一块石头的重量 II - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;动态规划之背包问题&#xff0c;这个背包最多能装多少&#xff1f;LeetCode&#xff1a;1049.最后一块石头的重量II_哔哩…

关于hive sql进行调优的理解

这是一个面试经常面的问题&#xff0c;很不幸&#xff0c;在没有准备的时候&#xff0c;我面到了这个题目&#xff0c;反思了下&#xff0c;将这部分的内容进行总结&#xff0c;给大家一点分享。 hive其实是基于hadoop的数据库管理工具&#xff0c;底层是基于MapReduce实现的&a…

date_range()函数--Pandas

1. 函数功能 生成连续的日期时间序列 2. 函数语法 pandas.date_range(startNone, endNone, periodsNone, freqNone, tzNone, normalizeFalse, nameNone, inclusiveboth, *, unitNone, **kwargs)3. 函数参数 参数含义start可选参数&#xff0c;起始日期end可选参数&#xff…

01-Flask-简介及环境准备

Flask-简介及环境准备 前言简介特点Flask 与 Django 的比较环境准备 前言 本篇来介绍下Python的web框架–Flask。 简介 Flask 是一个轻量级的 Web 框架&#xff0c;使用 Python 语言编写&#xff0c;较其他同类型框架更为灵活、轻便且容易上手&#xff0c;小型团队在短时间内…

QtCreator指定Windows Kits版本

先说下事件起因&#xff1a;之前一直在用Qt5.12.6&#xff0b;vs2017在写程序&#xff0c;后面调研了一个开源库Qaterial&#xff0c;但是翻来覆去的编译都有问题&#xff0c;后面升级到了Qt5.15.2&#xff0b;vs2019来进行cmake的编译&#xff0c;搞定了Qaterial&#xff0c;但…

深入了解Webpack:特性、特点和结合JS混淆加密的实例

Webpack是现代前端开发中最受欢迎的构建工具之一&#xff0c;其强大的特性和灵活性使得开发者能够更有效地管理和优化项目资源。在本文中&#xff0c;我们将深入探讨Webpack的特性和特点&#xff0c;并结合实例演示如何使用Webpack与JS混淆加密相结合。Webpack的特性和特点 1.…

Go的Gorm数据库操作错误WHERE conditions required

这是我在写这个代码处出现的问题 result : db.Save(&emergency) 这个错误是由于在提交保存数据时&#xff0c;GORM 需要指定 WHERE 条件&#xff0c;确保能够正确执行数据库操作。要解决这个问题&#xff0c;可以尝试使用 Create 方法替换 Save 方法&#xff0c;同时将创…

软考A计划-系统集成项目管理工程师-小抄手册(共25章节)-下

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

深度学习经典检测方法的概述

深度学习经典的检测方法 two-stage&#xff08;两阶段&#xff09;&#xff1a;Faster-rcnn Mask-Rcnn系列 两阶段&#xff08;two-stage&#xff09;是指先通过一个区域提取网络&#xff08;region proposal network&#xff0c;RPN&#xff09;生成候选框&#xff0c;再通过…

C++中运算符的重载以及静态成员和类的继承及多继承

运算符重载 赋值运算符重载 种类&#xff1a;、、-、*、/、%表达式&#xff1a;L # R &#xff08;L&#xff1a;左操作数 #运算符 R&#xff1a;右操作数&#xff09;左操作数&#xff1a;只能是左值右操作数&#xff1a;可以是左值&#xff0c;也可以是右值&#xff0c;在运…

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

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

SLAM十四讲学习笔记 第二期:部分课后实践代码

持续更新.... 前期准备第二讲实验一&#xff1a;简单输出 第五讲任务一&#xff1a;imageBasics&#xff08;Ubuntu配置opencv&#xff09;任务二&#xff1a;双目匹配点云&#xff08;Ubuntu配置pangolin&#xff09;检验部分我认为可以加深对CMake的理解 任务三&#xff1a;r…

pandas数据分析——groupby得到分组后的数据

groupbyagg分组聚合对数据字段进行合并拼接 Pandas怎样实现groupby聚合后字符串列的合并&#xff08;四十&#xff09; groupby得到分组后的数据 pandas—groupby如何得到分组里的数据 date_range补齐缺失日期 在处理时间序列的数据中&#xff0c;有时候会遇到有些日期的数…

springboot源码编译问题

问题一 Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom:2.2.5.RELEASE in nexus-aliyun (http://maven.aliyun.com/nexus/content/groups/public/) 意思是无法在阿里云的镜像仓库中找到资源 解决&#xff1a;将配置的镜像删除即可&#…

iOS开发Swift-函数

1.函数的定义和调用 func greet(person: String) -> String { // 函数名 传入值 传入值类型 返回值类型let greeting "Hello" personreturn greeting } print( greet(person: "Anna") ) //调用2.函数的参数与返回值 (1)无参函数 func sayHe…

STM32 CAN 波特率计算分析

这里写目录标题 前言时钟分析时钟元到BIT 前言 CubeMX中配置CAN波特率的这个界面刚用的时候觉得非常难用&#xff0c;怎么都配置不到想要的波特率。接下来为大家做一下简单的分析。 时钟分析 STM32F4的CAN时钟来自APB1 在如下界面配置&#xff0c;最好配置为1个整一点的数。…

cpolar做一个内网穿透

因为不在公司&#xff0c;需要访问公司的数据库&#xff0c;所以做一个内网穿透 下载安装 下载地址&#xff1a; https://dashboard.cpolar.com/get-started 下载后是个压缩包&#xff0c;解压后傻瓜式安装 操作隧道 安装后打开Cpolar Web UI 登录账号&#xff0c;查看隧…

如何评估分类模型的好坏

如何评估分类模型的好坏 评估分类预测模型的质量&#xff0c;常用一个矩阵、三条曲线和六个指标。 一个矩阵&#xff1a;混淆矩阵&#xff1b;三条曲线&#xff1a;ROC曲线、PR曲线、KS曲线&#xff1b;六个指标&#xff1a;正确率Acc、查全率R、查准率P、F值、AUC、BEP值、KS…

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

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

SVM详解

公式太多了&#xff0c;就用图片用笔记呈现&#xff0c;SVM虽然算法本质一目了然&#xff0c;但其中用到的数学推导还是挺多的&#xff0c;其中拉格朗日约束关于α>0这块证明我看了很长时间&#xff0c;到底是因为悟性不够。对偶问题也是&#xff0c;用了一个简单的例子才明…