微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
本文實(shí)例講述了微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能。分享給大家供大家參考,具體如下:
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>{{userName}}</view> <view>{{psw}}</view> <toast duration="2000" hidden="{{toastHidden}}" bindchange="toastBindChange">用戶名或密碼不能為空!</toast>
② index.js
Page({ data:{ // text:"這是一個(gè)頁面" toastHidden:true, userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){ this.setData({ toastHidden:!this.data.toastHidden }) }else{ this.setData({ tip:'', userName:'用戶名:'+e.detail.value.userName, psw:'密碼:'+e.detail.value.psw }) } }, formReset:function(){ this.setData({ userName:'', psw:'' }) }, toastBindChange:function(){ this.setData({ toastHidden:!this.data.toastHidden }) } })
3、源代碼點(diǎn)擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
JS中使用new Date(str)創(chuàng)建時(shí)間對象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09使用flutter創(chuàng)建可移動(dòng)的stack小部件功能
本文主要介紹我為桌面和 Web 設(shè)計(jì)的一個(gè)超級秘密 Flutter 項(xiàng)目使用了畫布和可拖動(dòng)節(jié)點(diǎn)界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動(dòng)功能,需要的朋友可以參考下2021-10-10layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子
今天小編就為大家分享一篇layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼
動(dòng)態(tài)創(chuàng)建div屬性和樣式在某些情況下還是比較實(shí)用的,下面為大家詳細(xì)介紹下js中div屬性和樣式的動(dòng)態(tài)創(chuàng)建,感興趣的朋友可以參考下2013-10-10JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法,實(shí)例分析了javascript操作圖片切換方向的幻燈片技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JavaScript實(shí)現(xiàn)將xml轉(zhuǎn)換成html table表格的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將xml轉(zhuǎn)換成html table表格的方法,實(shí)例分析了javascript操作XML文件與table表格的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04