微信小程序登录时如何获取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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
解决vue中provide inject的响应式监听
Apr 19 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获得文件扩展名三法
2006/11/25 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php调用C代码的实现方法
2014/03/11 PHP
php生成QRcode实例
2014/09/22 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
json的使用小结
2016/06/08 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
js实现交通灯效果
2017/01/13 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python中如何引入第三方模块
2020/05/27 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python中xlrd模块的使用详解
2021/02/01 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
入党积极分子评语
2014/05/04 职场文书
2014年会策划方案
2014/05/11 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
客服专员岗位职责
2015/02/10 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
docker 制作mysql镜像并自动安装
2022/05/20 Servers