微信小程序簡(jiǎn)單實(shí)現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例
更新時(shí)間：2017年11月30日 10:10:25 作者：FutrueJet
這篇文章主要介紹了微信小程序簡(jiǎn)單實(shí)現(xiàn)form表單獲取輸入數(shù)據(jù)功能,涉及微信小程序針對(duì)form表單的事件綁定及數(shù)據(jù)獲取等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序簡(jiǎn)單實(shí)現(xiàn)form表單獲取輸入數(shù)據(jù)功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
index.wxml
<form bindsubmit="formBindsubmit" bindreset="formReset">
<view style="display:flex;">
<label>用戶(hù)名：</label>
<input name="userName" placeholder="請(qǐng)輸入用戶(hù)名！" />
</view>
<view style="display:flex;">
<label>密碼：</label>
<input name="psw" placeholder="請(qǐng)輸入密碼！" 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:"這是一個(gè)頁(yè)面"
tip:'',
userName:'',
psw:''
},
formBindsubmit:function(e){
if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){
this.setData({
tip:'提示：用戶(hù)名和密碼不能為空！',
userName:'',
psw:''
})
}else{
this.setData({
tip:'',
userName:'用戶(hù)名：'+e.detail.value.userName,
psw:'密碼：'+e.detail.value.psw
})
}
},
formReset:function(){
this.setData({
tip:'',
userName:'',
psw:''
})
}
})
3、完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
Bootstrap框架的學(xué)習(xí)教程詳解(二)
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學(xué)習(xí)教程詳解，對(duì)bootstrap框架感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10
JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話(huà)、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11
原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果
本文主要分享了原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果的示例代碼以及原理分析。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Vue項(xiàng)目vscode 安裝eslint插件的方法(代碼自動(dòng)修復(fù))
這篇文章主要介紹了Vue項(xiàng)目vscode 安裝eslint插件的方法 代碼自動(dòng)修復(fù),需要的朋友可以參考下2020-04-04
javascript實(shí)現(xiàn)添加附件功能的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)添加附件功能的方法，在我們編輯信息時(shí)，有時(shí)候需要附加文件、圖片實(shí)現(xiàn)上傳功能，通過(guò)本文了解javascript是如何實(shí)現(xiàn)附加功能的，請(qǐng)閱讀。2015-11-11
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時(shí)候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時(shí)候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下2022-02-02
uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬
這篇文章主要為大家詳細(xì)介紹了uin-app+mockjs實(shí)現(xiàn)本地?cái)?shù)據(jù)模擬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)無(wú)縫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
js操作Xml(向服務(wù)器發(fā)送Xml,處理服務(wù)器返回的Xml)(IE下有效)
js操作Xml(向服務(wù)器發(fā)送Xml,處理服務(wù)器返回的Xml)(暫只IE下有效)2009-01-01
JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式
JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式...2007-12-12