微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】


Posted in Javascript onDecember 09, 2017

本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

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、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 #Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 #Javascript
Javascript中的作用域及块级作用域
Dec 08 #Javascript
Vue中自定义全局组件的实现方法
Dec 08 #Javascript
Vue中的Vux配置指南
Dec 08 #Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 #Javascript
vue axios 二次封装的示例代码
Dec 08 #Javascript
You might like
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
应届毕业生个人自我评价
2013/09/20 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
大学迎新生标语
2014/10/06 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Python极值整数的边界探讨分析
2021/09/15 Python
Python Matplotlib库实现画局部图
2021/11/17 Python
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
python中的getter与setter你了解吗
2022/03/24 Python