微信小程序登录时如何获取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 引发两次$(document.ready)事件
Jan 15 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
原生js实现购物车功能
Sep 23 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中设置时区方法小结
2012/06/03 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python开发之thread线程基础实例入门
2015/11/11 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python接口开发实现步骤详解
2020/04/26 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
军训心得体会
2013/12/31 职场文书
迟到检讨书500字
2014/02/05 职场文书
网站客服岗位职责
2014/04/05 职场文书
三年级小学生评语
2014/04/22 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
教师个人教学总结
2015/02/11 职场文书