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 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
JS之小练习代码
2008/10/12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python打包可执行文件的方法详解
2016/09/19 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python实现画图工具
2020/08/27 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
init进程的作用
2012/04/12 面试题
人力资源主管职责范本
2014/03/05 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫