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 脚本的加载与执行
Apr 19 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
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安全性问题中的:Null 字符问题
2013/06/21 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python装饰器的特性原理详解
2019/12/25 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python 绘制正态曲线的示例
2020/09/24 Python
毕业生就业自荐信
2013/12/04 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
学校德育工作总结2015
2015/05/11 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2016银行求职自荐信
2016/01/28 职场文书
导游词之青岛崂山
2019/12/27 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
Python机器学习之PCA降维算法详解
2021/05/19 Python
python实现简单石头剪刀布游戏
2021/10/24 Python
css3 文字断裂效果
2022/04/22 HTML / CSS