微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例
本文實例講述了微信小程序簡單實現(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、完整實例代碼點(diǎn)擊此處本站下載。
希望本文所述對大家微信小程序開發(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-06JS如何獲取瀏覽器聲音、麥克風(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元素的運(yùn)動原理和實現(xiàn)效果代碼,需要的朋友來看下吧2016-12-12ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)
這篇文章主要介紹了ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01