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

这篇文章主要介绍了微信小程序登录时如何获取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) {
 },
})

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

时间: 2019-12-04

微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e

微信小程序 input输入框详解及简单实例

微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String   输入框的内容 type String text input的类型,

详解微信小程序input标签正则初体验

开篇废话 在开发过程中经常遇到这样的需求:用户只能输入数字并且只保留小数点两位.虽然我们可以在提交表单的时候进行验证,但是体验不是很好.下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听,然后进行正则匹配. 1. input标签 微信小程序input标签自带type=digit属性,可以调起带有小数点的数字键盘,maxlength属性可以控制我们输入字符的个数,然后我们给input标签绑定bindinput方法. <input type="digit"

微信小程序input框中加入小图标的实现方法

最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in

微信小程序 (十七)input 组件详细介绍

input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

微信小程序实现提交input信息到后台的方法示例

本文实例讲述了微信小程序实现提交input信息到后台的方法.分享给大家供大家参考,具体如下: wxml文件: <!-- 用户名事件绑定 --> <view class="fl_form"> <text>您的姓名</text> <input type="text" placeholder='请输入您的姓名' value="{{userName}}" bindblur='userNameInput

微信小程序bindinput与bindsubmit的区别实例分析

本文实例讲述了微信小程序bindinput与bindsubmit的区别.分享给大家供大家参考,具体如下: 实际上的话,bindinput还有bindsubmit是没有任何的可比性的,但是两者还是常常被人一起比较,为啥? 比如一个简单的搜索框,你是愿意选择使用bindinput还是使用bindsubmit?,虽然一个是表单,一个是文本输入框,但是两者都有一个共同点,就是可以去获取到用户的输入信息.这个时候,问题来了,区别在哪儿? 最简单的一段代码在下面: <form bindsubmit='inp

微信小程序 input输入框控件详解及实例(多种示例)

微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

微信小程序网络请求wx.request详解及实例

微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

微信小程序 滚动选择器(时间日期)详解及实例代码

微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

微信小程序 radio单选框组件详解及实例代码

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成 属性名 类型 默认值 说明 bindchange EventHandle   radio-g

微信小程序 视图容器组件的详解及实例代码

微信小程序 视图容器组件详解: 小程序给出的视图容器组件有三个:</view>.</scroll-view>和</swiper>: 1.</view> 视图容器 </view>相当于html中的</div>标签,有四个属性: hover和hover-class与点击效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果. hover-start-time和hover-stay-time与点击效果的时间有关:h

微信小程序 MD5加密登录密码详解及实例代码

微信小程序 MD5加密 在小程序中,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件.zepto/jquery 也无法使用,因为zepto/jquery 会使用到window对象和document对象.所以在微信小程序中不能使用jquery.md5.js对密码进行加密.下面我提供一种MD5.js加密实例,本实例先静态演示,后面再到小程序中演示. md5.js程序如下: /* * A JavaScript impl

微信小程序左右滑动切换页面详解及实例代码

微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

微信小程序 轮播图swiper详解及实例(源码下载)

微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

微信小程序 wx.request(object) API详解及实例代码

这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图 定位到asdebug.js文件 打开搜索关键字URL 域名不合法关键字就是提示错误信息注释两行代码 主要方法: wxml <block wx:for-items="{{result}}"> <view style="width:100%; height: 50rpx"></view>

微信小程序 点击控件后选中其它反选实例详解

微信小程序 点击控件后选中其它反选实例详解 前言: 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件. 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件: <block wx:for="{{liuliangItems}}"> <block wx:if="{{item.one2one == 1}}"> &l