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 监听textarea中按键事件
Oct 08 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
代码整洁之道(重构)
Oct 25 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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个人网站架设连环讲(三)
2006/10/09 PHP
实用函数3
2007/11/08 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP重载基础知识回顾
2020/09/10 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
前端性能优化建议
2020/09/17 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
商务英语应届生自我鉴定
2013/12/08 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
企业金融服务方案
2014/06/03 职场文书
个人党性分析材料
2014/12/19 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers