JS实现密码框效果


Posted in Javascript onSeptember 10, 2020

在输入密码时,将密码的长度设置为6-16,且在密码长度出现小于6或是大于16时,会出现提示,效果如下图

JS实现密码框效果

JS实现密码框效果

JS实现密码框效果

 1. 此事件为失去焦点事件,当鼠标离开密码框且点击旁边就会触发事件
 2. 输入密码会出现提示,事件发生与密码的长度有关
 3. 根据长度再来判断该提示的消息与效果.

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>密码框</title>
 <style type="text/css">
 div{
  width: 600px;
  margin: 100px auto;
 }
  .massage{
   background-image: url(gth.png);
   background-repeat:no-repeat;
   background-position: left center;
   color:black;
   display: inline-block;
   padding-left: 20px;
  } 
  .right{
   background-image: url(right.png);
   background-repeat: no-repeat;
   color: green;
  }
  .wrong{
   background-repeat: no-repeat;
   background-image: url(wrong.png);
   color: red;
  }
 </style>
</head>
<body>
 <div class="register">
 <input type="password" id="pwd">
 <p class="massage">请输入6-16位密码</p>
 </div>
 <script>
  var pwd=document.querySelector('#pwd'); 
  var aa=document.querySelector('.massage');
  pwd.onblur= function(){
    if(this.value.length>16 || this.value.length<6){
     aa.innerText='错误,请输入6-16为密码';
     aa.className='massage wrong';
    }else{
    aa.className='massage right';
    aa.innerText='密码正确'; 
    }
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
使用JavaScript实现alert的实例代码
Jul 06 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
JavaScript常用工具函数库汇总
Sep 17 #Javascript
el-form 多层级表单的实现示例
Sep 10 #Javascript
详解React的回调渲染模式
Sep 10 #Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
You might like
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python生成随机数的方法
2014/01/14 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
说一说Python logging
2016/04/15 Python
Python三级目录展示的实现方法
2016/09/28 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python版本的仿windows计划任务工具
2018/04/30 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
softmax及python实现过程解析
2019/09/30 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python气泡提示与标签的实现
2020/04/01 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
Final类有什么特点
2012/04/25 面试题
小学体育教学反思
2014/01/31 职场文书
组织鉴定材料
2014/06/02 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
Java 数据结构七大排序使用分析
2022/04/02 Java/Android