微信小程序使用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使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
JavaScript的Set数据结构详解
Feb 18 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
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
js输出列表实现代码
2010/09/12 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
React SSR样式及SEO的实践
2018/10/22 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python日志记录模块实例及改进
2017/02/12 Python
Python内置模块turtle绘图详解
2017/12/09 Python
解读python logging模块的使用方法
2018/04/17 Python
TensorFlow实现模型评估
2018/09/07 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
10个示例带你掌握python中的元组
2020/11/23 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
廉政教育心得体会
2014/01/01 职场文书
文科生自我鉴定
2014/02/15 职场文书
抄作业检讨书
2014/02/17 职场文书
抗震救灾标语
2014/06/26 职场文书
政风行风建设责任书
2014/07/23 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
朋友离别感言
2015/08/04 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书