Utilisez le composant toast pour implémenter la fonction d'inviter les utilisateurs à oublier de saisir leur nom d'utilisateur ou leur mot de passe

Les mini-programmes WeChat deviennent de plus en plus populaires maintenant, et de plus en plus de fonctions de développement sont nécessaires. Cet article présente principalement la fonction des mini-programmes WeChat pour utiliser la boîte de dialogue de message toast pour inviter les utilisateurs à oublier de saisir leur. nom d'utilisateur ou mot de passe, et l'analyse en détail avec des exemples. J'espère que cela pourra aider tout le monde avec les techniques de fonctionnement pertinentes pour la mise en œuvre de la fonction d'invite de message du composant toast.

1. Affichage des effets

2.

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

Après avoir lu cet article, avez-vous appris quelque chose ? Dépêchez-vous et essayez-le.

Recommandations associées :

Explication détaillée de la méthode de mise en œuvre de toast personnalisé du mini-programme WeChat

Un exemple complet de formulaire de mini-programme WeChat fonction de vérification

Une étude de cas sur la façon dont Thinkphp5 implémente l'interface d'informations utilisateur de l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!