当前位置: 首页 >>常用API接入 >>微信小程序 >>小程序提交表单的功能-获取用户输入文本框的值

小程序提交表单的功能-获取用户输入文本框的值

时间:2018/10/16 7:27:09 【admin】

小程序提交表单的功能-获取用户输入文本框的值…

我们就拿简单常用的登录来举例子吧,先看最终效果图片

1.jpg

小程序的前端页面:login.wxml

<view class="itemView">用户名:

    <input class="input" name="userName" placeholder="请输入用户名"   bindinput ="userNameInput"/>

  </view>

<view class="itemView">密    码:

    <input class="input" password placeholder="请输入密码"    bindinput="passWdInput" />

  </view>

<view class="viewName" style="background-color:#fbf9fe">

  <button class="loginBtn" bindtap="loginBtnClick">登录</button>

</view>

复制代码

在看js代码:


小程序的JS处理页面:login.js


// pages/index/login.js

Page({

  data: {

    userName: '',

    userPwd:""

  },

  //获取用户输入的用户名

  userNameInput:function(e)

  {

    this.setData({

      userName: e.detail.value

    })

  },

  passWdInput:function(e)

  {

    this.setData({

      userPwd: e.detail.value

    })

  },

  //获取用户输入的密码

  loginBtnClick: function (e) {

    console.log("用户名:"+this.data.userName+" 密码:" +this.data.userPwd);

  }

  ,

  // 用户点击右上角分享

  onShareAppMessage: function () {


  }

})




相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮