源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

微信小程序简单实现form表单获取输入数据功能示例

  • 时间:2021-05-01 18:21 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序简单实现form表单获取输入数据功能示例
本文实例讲述了微信小程序简单实现form表单获取输入数据功能。分享给大家供大家参考,具体如下: 1、效果展示 [img]http://files.jb51.net/file_images/article/201711/20171130102703053.gif?20171030102716[/img] 2、关键代码 index.wxml
<form bindsubmit="formBindsubmit" bindreset="formReset">
 <view style="display:flex;">
  <label>用户名:</label>
  <input name="userName" placeholder="请输入用户名!" />
 </view>
 <view style="display:flex;">
  <label>密码:</label>
  <input name="psw" placeholder="请输入密码!" password="true" />
 </view>
 <view style="display:flex;margin-top:30px;">
  <button style="width:30%;" formType="submit" >登录</button>
  <button style="width:30%" formType="reset" >重置</button>
 </view>
</form>
<view>{{tip}}</view>
<view>{{userName}}</view>
<view>{{psw}}</view>

index.js
Page({
 data:{
  // text:"这是一个页面"
  tip:'',
  userName:'',
  psw:''
 },
 formBindsubmit:function(e){
  if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){
   this.setData({
    tip:'提示:用户名和密码不能为空!',
    userName:'',
    psw:''
   })
  }else{
   this.setData({
    tip:'',
    userName:'用户名:'+e.detail.value.userName,
    psw:'密码:'+e.detail.value.psw
   })
  }
 },
 formReset:function(){
  this.setData({
   tip:'',
   userName:'',
   psw:''
  })
 }
})

3、完整实例代码点击此处[url=http://xiazai.jb51.net/201711/yuanma/titf_wxapp_form(jb51.net).rar][b]本站下载[/b][/url]。 希望本文所述对大家微信小程序开发有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部