微信小程序使用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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
微信小程序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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
新浪的图片新闻效果
2007/01/13 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
python中元类用法实例
2014/10/10 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python中常用的内置方法
2019/01/28 Python
python用match()函数爬数据方法详解
2019/07/23 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python中如何打包用户自定义模块
2020/09/23 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
大学生演讲稿范文
2014/01/11 职场文书
公务员保密承诺书
2014/03/27 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
一个都不能少观后感
2015/06/04 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL