微信小程序登录时如何获取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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
微信小程序日历插件代码实例
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的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP创建XML接口示例
2019/07/04 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js变换显示图片的实例
2013/04/16 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
React快速入门教程
2017/01/17 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python实现祝福弹窗效果
2019/04/07 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
竞选生活委员演讲稿
2014/04/28 职场文书
大型演出策划方案
2014/05/28 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
政协常委会议主持词
2015/07/03 职场文书
小学语文国培研修日志
2015/11/13 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang