微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例
更新時間：2017年11月30日 10:10:25 作者：FutrueJet
這篇文章主要介紹了微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能,涉及微信小程序針對form表單的事件綁定及數(shù)據(jù)獲取等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
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ā)有所幫助。
相關(guān)文章
Bootstrap框架的學(xué)習(xí)教程詳解(二)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學(xué)習(xí)教程詳解，對bootstrap框架感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10
JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11
本文主要分享了原生js實現(xiàn)電商側(cè)邊導(dǎo)航效果的示例代碼以及原理分析。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
Vue項目vscode 安裝eslint插件的方法(代碼自動修復(fù))
這篇文章主要介紹了Vue項目vscode 安裝eslint插件的方法 代碼自動修復(fù),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了javascript實現(xiàn)添加附件功能的方法，在我們編輯信息時，有時候需要附加文件、圖片實現(xiàn)上傳功能，通過本文了解javascript是如何實現(xiàn)附加功能的，請閱讀。2015-11-11
這篇文章主要介紹了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)無縫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
js操作Xml(向服務(wù)器發(fā)送Xml,處理服務(wù)器返回的Xml)(IE下有效)
js操作Xml(向服務(wù)器發(fā)送Xml,處理服務(wù)器返回的Xml)(暫只IE下有效)2009-01-01
JS的遞增/遞減運算符和帶操作的賦值運算符的等價式...2007-12-12