微信小程序登录时如何获取input框中的内容


Posted in Javascript onDecember 04, 2019

这篇文章主要介绍了微信小程序登录时如何获取input框中的内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助。下面是登录页,点击登录时获取input框中的值,

效果如下:

wxml布局如下:

<view >
   <input type="text" placeholder-style="color:#fff;" bindinput="userNameInp" placeholder="请输入账号" />
</view>
<view >
   <input password placeholder-style="color:#fff;" bindinput="usePasswordInp" placeholder="请输入密码"/>
</view>
 <button class="loginBtn" bindtap='loginFn'>登录</button>

js代码如下:

const app = getApp();
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  userName: "",
  passWord: "",
 },
 //监听输入的账号
 userNameInp: function (e) {
  this.data.userName = e.detail.value;
 },
 //监听输入的密码
 usePasswordInp: function (e) {
  this.data.passWord = e.detail.value;
 },
 //登录
 loginFn: function () {
  var that = this;
  if (that.data.userName.length == 0 || that.data.passWord.length == 0) {
   wx.showToast({
    title: '账号或密码为空',
    icon: 'loading',
    duration: 2000
 
   })
  } else {
   wx.showLoading({
    title: '登录中...',
   })
   wx.request({
    url: 'https://localhost:8180/exam/login',
    data: {
     username: that.data.userName,
     password: that.data.passWord
    },
    header: {
     'content-type': 'application/x-www-form-urlencoded' // 默认值
    },
    method: 'post',
    success: function (res) {
     wx.hideLoading();
     wx.removeStorageSync('sessionid');
     // console.log('登录成功', res.data.data);
     if (res.data.code == "0000") {
      wx.showToast({
       title: '登录成功',
       icon: 'success',
       duration: 1000
      })
      wx.setStorageSync('sessionid', res.header['Set-Cookie']); //保存Cookie到Storage
      wx.setStorage({
       key: 'myData',
       data: res.data.data
      })
      wx.redirectTo({
       url: '/pages/index/index',
      })
     } else {
      wx.showToast({
       title: '登录失败',
       icon: 'none',
       duration: 2000
      })
     }
    },
    fail: function (e) {
     wx.showToast({
      title: '服务器出现错误',
      icon: 'none',
      duration: 2000
     })
    }
 
   })
  }
  },
  //跳转到忘记密码页面
 onTapDayWeather() {
  wx.navigateTo({
   url: '/pages/updatepwd/updatepwd',
  })
 },
  /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
微信小程序日历插件代码实例
Dec 04 #Javascript
微信小程序request请求封装,验签代码实例
Dec 04 #Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 #Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 #Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 #Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 #Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
You might like
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
js常用DOM方法详解
2017/02/04 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
公司业务主管岗位职责
2013/12/07 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
迟到早退检讨书
2014/02/10 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
入党介绍人意见2015
2015/06/01 职场文书
《三国志》赏析
2019/08/27 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers