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
3091 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template