微信小程序使用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 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
js实现旋转木马效果
Mar 17 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
js实现带有动画的返回顶部
Aug 09 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
package.json文件配置详解
2017/06/15 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
单位办理社保介绍信
2014/01/10 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
会计岗位工作总结
2015/08/12 职场文书