微信小程序簡單實現(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)步驟講解詳細,需要的可以參考一下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基于javascript實現(xiàn)按圓形排列DIV元素(二)
本篇文章主要介紹基于javascript實現(xiàn)按圓形排列DIV元素的方法,此文著重于介紹怎樣實現(xiàn)的按圓形排列DIV元素的運動原理和實現(xiàn)效果代碼,需要的朋友來看下吧2016-12-12ES2020讓代碼更優(yōu)美的運算符 (?.) (??)
這篇文章主要介紹了ES2020讓代碼更優(yōu)美的運算符 (?.) (??),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01