快捷導(dǎo)航

微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】

更新時間：2017年12月09日 10:08:39 作者：FutrueJet

這篇文章主要介紹了微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能,結(jié)合實例形式詳細(xì)分析了toast組件實現(xiàn)消息提示功能的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了微信小程序使用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:"這是一個頁面"
  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、源代碼點擊此處本站下載。

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
探討：JavaScript ECAMScript5 新特性之get/set訪問器
這篇文章主要介紹了探討：JavaScript ECAMScript5 新特性之get/set訪問器的相關(guān)資料,需要的朋友可以參考下
2016-05-05
js中[]、{}、()區(qū)別示例淺析
很多人都知道在js中[]表示的是數(shù)組對象,{}表示的是對象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關(guān)于js中[]、{}、()區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-06-06
javascript:void(0)是什么意思示例介紹
Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值，有不了解的朋友可以參考下本文
2013-11-11
什么是JavaScript注入攻擊?
本文告訴大家什么是js注入，討論防止 ASP.NET MVC 應(yīng)用程序受到 JavaScript 注入攻擊的兩種技術(shù)，感興趣的小伙伴們可以參考一下
2016-09-09
js簡單工廠模式用法實例
這篇文章主要介紹了js簡單工廠模式用法,實例分析了javascript工廠模式的實現(xiàn)原理,需要的朋友可以參考下
2015-06-06
JS關(guān)閉子窗口并且刷新上一個窗口的實現(xiàn)示例
這篇文章主要介紹了JS關(guān)閉子窗口并且刷新上一個窗口的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
JS簡單實現(xiàn)點擊復(fù)制鏈接的方法
這篇文章主要介紹了JS簡單實現(xiàn)點擊復(fù)制鏈接的方法,提供了2種簡單的復(fù)制鏈接操作方法供大家選擇使用,需要的朋友可以參考下
2016-08-08
微信小程序車牌號碼模擬鍵盤輸入功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序車牌號碼模擬鍵盤輸入功能的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
asp.net+js實現(xiàn)金額格式化
這篇文章主要介紹了asp.net+js實現(xiàn)金額格式化的相關(guān)資料,需要的朋友可以參考下
2015-02-02