微信小程序簡(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>用戶名：</label>
<input name="userName" placeholder="請(qǐng)輸入用戶名！" />
</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:'提示：用戶名和密碼不能為空！',
userName:'',
psw:''
})
}else{
this.setData({
tip:'',
userName:'用戶名：'+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)文章
js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法
今天小編就為大家分享一篇js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了javascript禁用Tab鍵的腳本實(shí)例，很實(shí)用，大家參考使用吧2013-11-11
詳解JavaScript如何創(chuàng)建一個(gè)非自動(dòng)播放的GIF網(wǎng)絡(luò)組件
這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個(gè)允許您的用戶決定是否要播放gif的Web組件，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的可以參考一下2022-02-02
基于JS實(shí)現(xiàn)Android,iOS一個(gè)手勢(shì)動(dòng)畫(huà)效果
這篇文章主要介紹了基于JS實(shí)現(xiàn)Android,iOS一個(gè)手勢(shì)動(dòng)畫(huà)效果 的相關(guān)資料,需要的朋友可以參考下2016-04-04
今天發(fā)現(xiàn)chrome還是有一些獨(dú)一無(wú)二的東西，基于它們，我們就可以搞出基于特征的判定了。2010-03-03
淺析基于WEB前端頁(yè)面的頁(yè)面內(nèi)容搜索的實(shí)現(xiàn)思路
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼，需要的朋友可以參考下2014-06-06
JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限
在我們開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候偶爾會(huì)有需要用戶錄音的情況,下面這篇文章主要給大家介紹了關(guān)于JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
本篇文章主要介紹了js獲取瀏覽器各種屬性的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法，此文著重于介紹怎樣實(shí)現(xiàn)的按圓形排列DIV元素的運(yùn)動(dòng)原理和實(shí)現(xiàn)效果代碼，需要的朋友來(lái)看下吧2016-12-12
ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)
這篇文章主要介紹了ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01