微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
本文實(shí)例講述了微信小程序使用toast消息對(duì)話框提示用戶忘記輸入用戶名或密碼功能。分享給大家供大家參考,具體如下:
1、效果展示

2、關(guān)鍵代碼
① index.wxml
<form bindsubmit="formBindsubmit" bindreset="formReset">
<view style="display:flex;">
<label>用戶名:</label>
<input name="userName" placeholder="請(qǐng)輸入用戶名!" />
</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>{{userName}}</view>
<view>{{psw}}</view>
<toast duration="2000" hidden="{{toastHidden}}" bindchange="toastBindChange">用戶名或密碼不能為空!</toast>
② index.js
Page({
data:{
// text:"這是一個(gè)頁(yè)面"
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)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容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è)超級(jí)秘密 Flutter 項(xiàng)目使用了畫布和可拖動(dòng)節(jié)點(diǎn)界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動(dòng)功能,需要的朋友可以參考下2021-10-10
layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子
今天小編就為大家分享一篇layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript動(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-10
JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法,實(shí)例分析了javascript操作圖片切換方向的幻燈片技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript實(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
ECMAScript 創(chuàng)建自己的js類庫(kù)
ECMAScript中最有意思,最強(qiáng)大的地方在于函數(shù)。最進(jìn)在完善自己的js類庫(kù)的時(shí)候發(fā)現(xiàn)我們經(jīng)常在用函數(shù),但真的很少有人懂得ECMAScript函數(shù)功能2012-11-11

