微信小程序-form表单-获取用户输入文本框的值

微信小程序-form表单-获取用户输入文本框的值

data: {userName: '',userPwd:""},//获取用户输入的用户名
userNameInput:function(e)
{this.setData({userName: e.detail.value})
},
passWdInput:function(e)
{this.setData({userPwd: e.detail.value})
},
//获取用户输入的密码
loginBtnClick: function (e) {console.log("用户名:"+this.data.userName+" 密码:" +this.data.password);
},

<!--pages/login/login3.wxml-->
<input class="input" name="userName" placeholder="请输入用户名"bindinput ="userNameInput"/><input class="input" name="password" placeholder="请输入密码"bindinput="passWdInput" /><button class="loginBtn" bindtap="loginBtnClick">登录</button>

//登录函数
toLogin(e){//获取提交的用户名和密码用变量存储var userName=e.detail.value.userName;var userPwd=e.detail.value.userPwd;console.log("要提交给服务器的用户名和密码是",userName,userPwd);
},
<!--定义form组件-->
<form bindsubmit="toLogin"><!--输入框区块--><view id="inputView"><!--文本框--><input type="text" placeholder="手机号/用户名" name="userName"></input><!--密码框--><input type="text" placeholder="密码" password name="userPwd"></input></view><!--按钮区域--><view id="buttonView"><button form-type="submit">登录</button><button>注册</button><view>忘记密码</view></view>
</form>

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

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

相关文章

【信息安全原理】——IP及路由安全(学习笔记)

目录 &#x1f552; 1. IPv4协议及其安全性分析&#x1f552; 2. IPsec&#xff08;IP Security&#xff09;&#x1f558; 2.1 IPsec安全策略&#x1f564; 2.1.1 安全关联&#xff08;Security Association, SA&#xff09;&#x1f564; 2.1.2 安全策略&#xff08;Security…

AI“走深向实”,蚂蚁蚁盾在云栖大会发布实体产业「知识交互建模引擎」

数字化起步晚、数据分散稀疏、专业壁垒高、行业知识依赖「老师傅」&#xff0c;是很多传统产业智能化发展面临的难题。2023年云栖大会上&#xff0c;蚂蚁集团安全科技品牌蚁盾发布“知识交互建模引擎”&#xff0c;将实体产业知识与AI模型有机结合&#xff0c;助力企业最快10分…

2024上海国际人工智能展(CSITF)以“技术,让生活更精彩”为核心理念,以“创新驱动发展,保护知识产权,促进技术贸易”为主题

2024上海国际人工智能展&#xff08;CSITF&#xff09; China&#xff08;Shanghai&#xff09;International Technology Fair 时间:2024年6月12-14日 地点:上海世博展览馆 主办单位 中华人民共和国商务部 中华人民共和国科学技术部 中华人民共和国国家知识产权局 上海市…

vue需求:实现签章/签字在页面上自由定位的功能(本质:元素在页面上的拖拽)

目录 第一章 效果展示 第二章 了解工具 2.1 draggable 2.1.1 了解draggable 2.1.2 draggable方法 2.1.3 利用例子理解方法 第三章 效果实现 3.1 实现思路 3.2 代码实现 3.2.1 涉及到的点 3.2.2 源代 第一章 效果展示 效果描述&#xff1a;通过点击左边栏的签名和…

如何在idea中使用maven搭建tomcat环境

目录 一、创建maven项目 二、完善代码结构 三、引入依赖和插件 四、启动tomcat&#xff0c;运行项目 &#xff08;1&#xff09;点击添加配置 &#xff08;2&#xff09;点击左上角的加号&#xff0c;选择maven &#xff08;3&#xff09;输入运行命令 五、验证 一、创建…

小红书koc怎么选,koc达人筛选指南!

小红书说到底就是一个用户与用户分享的平台&#xff0c;自然那些本身就具有一定能量的用户更加被注重&#xff0c;也就是KOC。今天为大家分享一下小红书koc怎么选&#xff0c;koc达人筛选指南&#xff01; 1、首先了解KOC的特点 KOC是指具有一定影响力&#xff0c;且在特定领域…

【向生活低头】win7打印机共享给win11使用,win11无法连接问题的解决

打印机是跟win7的电脑连接的&#xff0c;然后试了很多方法&#xff0c;win11都没法添加该打印机去使用。 网上的方法乱七八糟啥都有&#xff0c;但试了以后&#xff0c;发现基本没什么用。 刚刚发现知乎上的一个回答是有用的&#xff0c;这里做记录以备后用。 1.打开控制面板的…

家庭私人影院 - Windows搭建Emby媒体库服务器并远程访问 「无公网IP」

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…

八、W5100S/W5500+RP2040树莓派Pico<DNS>

文章目录 1 前言2 协议简介2.1 什么是DNS2.2 DNS的优点2.3 DNS工作原理2.4 应用场景 3 WIZnet以太网芯片4 DNS网络设置示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 烧录验证 5 注意事项6 相关链接 1 前言 为了更好地支持应用程序的性能和可用性…

微信小程序overflow-x超出部分样式不渲染

把display:flex改成display:inline-flex&#xff0c; 将对象作为内联块级弹性伸缩盒显示&#xff0c; 类似与是子元素将父元素撑开&#xff0c;样式就显示出来了

上线项目问题——无法加载响应数据

目录 无法加载响应数据解决 无法加载响应数据 上线项目时 改用服务器上的redis和MySQL 出现请求能请求到后端&#xff0c;后端也能正常返回数据&#xff0c;但是在前端页面会显示 以为是跨域问题&#xff0c;但是环境还在本地&#xff0c;排除跨域问题以为是服务器问题&#…

界面控件DevExpress WPF Gauge组件 - 轻松实现个性化商业仪表盘

DevExpress WPF Gauge&#xff08;仪表&#xff09;控件包含了多种圆形仪表类型、水平和垂直线性仪表、分段和矩阵数字仪表以及状态指示器&#xff0c;同时还具有最终用户交互性的集成支持。 P.S&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至…

免费(daoban)gpt,同时去除广告

一. 内容简介 免费(daoban)gpt&#xff0c;同时去除广告&#xff0c;https://chat18.aichatos.xyz/&#xff0c;也可当gpt用&#xff0c;就是有点广告&#xff0c;大家也可以支持一下 二. 软件环境 2.1 Tampermonkey 三.主要流程 3.1 创建javascript脚本 点击添加新脚本 …

css中flexbox和grid的区别

css中flexbox和grid的区别 我们是不是被那些不会按预期排列的元素所影响&#xff1f;这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异&#xff0c;我们会发现这些布局是如何改变我们网站的风格。 理解CSS布局 css布局是网页设计的一个重要方面&…

Proteus仿真--基于51单片机的走马灯实现(仿真文件+程序)

本文主要介绍基于51单片机的走马灯仿真&#xff08;完整仿真源文件及代码见文末链接&#xff09; 本设计中有16个LED灯用于流水走马演示&#xff0c;一位数码管用于显示当前模式状态&#xff0c;3个按键分别用于选择模式及加减速度控制 仿真图如下 其中 K1&#xff1a;用于模…

(免费领源码)java#springboot#MYSQL 电影推荐网站30760-计算机毕业设计项目选题推荐

摘 要 随着互联网时代的到来&#xff0c;同时计算机网络技术高速发展&#xff0c;网络管理运用也变得越来越广泛。因此&#xff0c;建立一个B/S结构的电影推荐网站&#xff1b;电影推荐网站的管理工作系统化、规范化&#xff0c;也会提高平台形象&#xff0c;提高管理效率。 本…

用LibreOffice在excel中画折线图

数据表格如下。假设想以x列为横坐标&#xff0c;y1和y2列分别为纵坐标画折线图。 选择插入-》图表&#xff1a; 选择折线图-》点和线&#xff0c;然后点击“下一步”&#xff1a; 选择&#xff1a;列中包含数据序列&#xff0c;然后点击完成&#xff08;因为图挡住了数据…

大促期间如何监测竞品数据

无论在什么时候&#xff0c;竞品的数据都是品牌非常关注的&#xff0c;大促当然也不例外&#xff0c;所以准确监测到竞品数据应该如何分析也很关键&#xff0c;通过分析竞品&#xff0c;品牌可以获取非常多有价值的内容&#xff0c;如竞品王牌产品的分析、行业分析报告等。 力维…

kotlin中集合操作符

集合操作符 1.总数操作符 any —— 判断集合中 是否有满足条件 的元素&#xff1b; all —— 判断集合中的元素 是否都满足条件&#xff1b; none —— 判断集合中是否 都不满足条件&#xff0c;是则返回true&#xff1b; count —— 查询集合中 满足条件 的 元素个数&#x…

4.多层感知机-3GPT版

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 多层感知机一、感知机1、感知机2、训练感知机3、图形解释4、收敛定理5、XOR问题6、总结 二、多层感知机1、XOR2、单隐藏层3、单隐藏层-单分类4、为什么需要非线性激活函数5、Sigmoid函数6、Tanh函数7、ReLU函数8、多类分…