Use the toast component to implement the function of prompting users to forget to enter their username or password-Mini Program Development-php.cn

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

小云云

Release： 2017-12-11 09:18:31

Original

3075 people have browsed it

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>

Copy after login

② index.js

Page({
 data:{
  // text:"这是一个页面"
  toastHidden:true,
  userName:&#39;&#39;,
  psw:&#39;&#39;
 },
 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:&#39;&#39;,
    userName:&#39;用户名：&#39;+e.detail.value.userName,
    psw:&#39;密码：&#39;+e.detail.value.psw
   })
  }
 },
 formReset:function(){
  this.setData({
   userName:&#39;&#39;,
   psw:&#39;&#39;
  })
 },
 toastBindChange:function(){
  this.setData({
    toastHidden:!this.data.toastHidden
  })
 }
})

Copy after login

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!