微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
程序员文章站
2022-06-24 21:14:01
本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
① index.w...
本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能。分享给大家供大家参考,具体如下:
1、效果展示
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 }) } })
3、源代码点击此处。
希望本文所述对大家微信小程序开发有所帮助。
上一篇: 几则幽默小笑话
下一篇: redis禁止几个危险命令的方法