Use the toast component to implement the function of prompting users to forget to enter their username or password

WeChat mini-programs are becoming more and more popular now, and more and more development functions are required. This article mainly introduces the function of WeChat mini-programs to use toast message dialog box to prompt users to forget to enter their username or password, and analyzes it in detail with examples. I hope it can help everyone with the relevant operating techniques for implementing the message prompt function of the toast component.

1. Effect display

##2. Key code

① 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
  })
 }
})

After reading this article, have you learned anything? Hurry up and give it a try.

Related recommendations:

Detailed explanation of the custom toast implementation method of WeChat Mini Program

Complete example of WeChat Mini Program form verification function

A case study on how Thinkphp5 implements WeChat applet to obtain user information interface

The above is the detailed content of Use the toast component to implement the function of prompting users to forget to enter their username or password. For more information, please follow other related articles on the PHP Chinese website!