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图表动画插件Highcharts Examples
Apr 16 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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验证码(支持中文)
2007/02/14 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python3实现绘制二维点图
2019/12/04 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Python修改DBF文件指定列
2020/12/19 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
土木工程师职业规划范文
2014/03/07 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫