微信小程序簡單實現(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)文章
詳解JavaScript如何創(chuàng)建一個非自動播放的GIF網(wǎng)絡(luò)組件
這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個允許您的用戶決定是否要播放gif的Web組件,文中的實現(xiàn)步驟講解詳細(xì),需要的可以參考一下2022-02-02
基于JS實現(xiàn)Android,iOS一個手勢動畫效果
這篇文章主要介紹了基于JS實現(xiàn)Android,iOS一個手勢動畫效果 的相關(guān)資料,需要的朋友可以參考下2016-04-04
淺析基于WEB前端頁面的頁面內(nèi)容搜索的實現(xiàn)思路
本文主要是想實現(xiàn)瀏覽器的CTRL+F功能,提供個思路和代碼,需要的朋友可以參考下2014-06-06
JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限
在我們開發(fā)網(wǎng)頁的時候偶爾會有需要用戶錄音的情況,下面這篇文章主要給大家介紹了關(guān)于JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
基于javascript實現(xiàn)按圓形排列DIV元素(二)
本篇文章主要介紹基于javascript實現(xiàn)按圓形排列DIV元素的方法,此文著重于介紹怎樣實現(xiàn)的按圓形排列DIV元素的運動原理和實現(xiàn)效果代碼,需要的朋友來看下吧2016-12-12
ES2020讓代碼更優(yōu)美的運算符 (?.) (??)
這篇文章主要介紹了ES2020讓代碼更優(yōu)美的運算符 (?.) (??),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01

