微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例

更新時間：2017年11月30日 10:10:25 作者：FutrueJet

這篇文章主要介紹了微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能,涉及微信小程序針對form表單的事件綁定及數(shù)據(jù)獲取等相關操作技巧,需要的朋友可以參考下

本文實例講述了微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能。分享給大家供大家參考，具體如下：

1、效果展示

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、完整實例代碼點擊此處本站下載。

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

Bootstrap框架的學習教程詳解(二)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學習教程詳解，對bootstrap框架感興趣的朋友跟著小編一起學習吧
2016-10-10
JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下
2024-11-11
原生js實現(xiàn)電商側邊導航效果
本文主要分享了原生js實現(xiàn)電商側邊導航效果的示例代碼以及原理分析。具有很好的參考價值，下面跟著小編一起來看下吧
2017-01-01
Vue項目vscode 安裝eslint插件的方法(代碼自動修復)
這篇文章主要介紹了Vue項目vscode 安裝eslint插件的方法代碼自動修復,需要的朋友可以參考下
2020-04-04
javascript實現(xiàn)添加附件功能的方法
這篇文章主要介紹了javascript實現(xiàn)添加附件功能的方法，在我們編輯信息時，有時候需要附加文件、圖片實現(xiàn)上傳功能，通過本文了解javascript是如何實現(xiàn)附加功能的，請閱讀。
2015-11-11
JavaScript幾種彈窗事件的使用
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下
2022-02-02
uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬
這篇文章主要為大家詳細介紹了uin-app+mockjs實現(xiàn)本地數(shù)據(jù)模擬，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
原生js實現(xiàn)無縫輪播圖效果
這篇文章主要為大家詳細介紹了原生js實現(xiàn)無縫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
js操作Xml(向服務器發(fā)送Xml,處理服務器返回的Xml)(IE下有效)
js操作Xml(向服務器發(fā)送Xml,處理服務器返回的Xml)(暫只IE下有效)
2009-01-01
JS的遞增/遞減運算符和帶操作的賦值運算符的等價式
JS的遞增/遞減運算符和帶操作的賦值運算符的等價式...
2007-12-12