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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP文件操作实例总结
2016/09/27 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
js实现日历与定时器
2017/02/22 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
详解Angular的8个主要构造块
2017/06/20 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
见习期自我鉴定
2014/01/31 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
工作检讨书怎么写
2015/01/23 职场文书
决心书格式及范文
2019/06/24 职场文书