微信小程序簡(jiǎn)單實(shí)現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例
本文實(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)文章
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如何創(chuàng)建一個(gè)非自動(dòng)播放的GIF網(wǎng)絡(luò)組件
這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個(gè)允許您的用戶(hù)決定是否要播放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淺析基于WEB前端頁(yè)面的頁(yè)面內(nèi)容搜索的實(shí)現(xiàn)思路
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼,需要的朋友可以參考下2014-06-06JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限
在我們開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候偶爾會(huì)有需要用戶(hù)錄音的情況,下面這篇文章主要給大家介紹了關(guān)于JS如何獲取瀏覽器聲音、麥克風(fēng)以及通知權(quán)限的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03基于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-12ES2020讓代碼更優(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