javascript解锁前端密码框常见功能做法

作者:馆主阿牛 时间:2024-04-16 10:36:33 

前言

学前端最基本的登录页面肯定要会写,那登录页面里面的密码框的功能设计就需要好好打磨,主要功能有显示密码明文,密码检测信息提示等等,那么本篇博客将写写这些功能结合js怎么做,很简单,看一下就会了。

显示隐藏密码明文

1.用到的图片素材

javascript解锁前端密码框常见功能做法

javascript解锁前端密码框常见功能做法

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box{
           position: relative;
           width: 400px;
           border-bottom: 1px solid #ccc;
           margin: 100px auto;
       }
       .box input{
           width: 370px;
           height: 30px;
           border: 0;
           outline: none;
       }
       .box .image{
           position: absolute;
           top:2px;
           right: 2px;
           border: 1px solid #ccc;
           background-color: #ccccccba;
           border-radius: 50%;
           overflow: hidden;
       }
       .box img{
           vertical-align: bottom;   /*父盒子是由img撑开的,所以要去除下面的间隙*/
           width: 22px;
       }

</style>
</head>
<body>
   <div class="box">
       <div class="image">
           <img src="close.png" alt="" id="img">
       </div>
       <input type="password"  id="pwd">
   </div>
   <script>
       var img = document.getElementById('img');
       var pwd = document.getElementById('pwd');
       var flag = 0;
       img.onclick = function(){
           if(flag == 0){
               pwd.type = 'text';
               this.src='open.png';   // this指向事件函数的调用者,即img
               flag = 1;
           }else{
               pwd.type = 'password';
               this.src='close.png';
               flag = 0;
           }
       }

</script>

</body>
</html>

3.结果演示

javascript解锁前端密码框常见功能做法

密码框验证信息

1.用到的图片素材

javascript解锁前端密码框常见功能做法

javascript解锁前端密码框常见功能做法

javascript解锁前端密码框常见功能做法

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .register{
           width: 600px;
           margin: 100px auto;
       }
       .ipt{
           width: 250px;
           border: 1px solid #999;
           outline: none;
       }
       .message{
           display: inline-block;
           height: 20px;
           font-size: 12px;
           color: #999;
           background: url(mess.png) no-repeat left center;
           padding-left: 30px;
       }
       .wrong{
           color: red;
           background: url(wrong.png) no-repeat left center;
       }
       .right{
           color: green;
           background: url(right.png) no-repeat left center;
       }
   </style>
</head>
<body>
   <div class="register">
       <input type="password" class="ipt">
       <p class="message">请输入6~16位密码</p>
   </div>
   <script>
       var ipt = document.querySelector('.ipt');
       var msg = document.querySelector('.message');
       ipt.onfocus = function(){
           this.style.borderColor = 'skyblue'
       }
       ipt.onblur = function(){
           this.style.borderColor = '#999';
           if(this.value.length<6 || this.value.length>16){
               msg.className = 'message wrong';
               msg.innerHTML = '你输入的位数不符合要求6~16位!';
           }else{
               msg.className = 'message right';
               msg.innerHTML = '你输入的正确!';
           }
       }
   </script>
</body>
</html>

3.结果演示

javascript解锁前端密码框常见功能做法

来源:https://blog.csdn.net/qq_57421630/article/details/123293224

标签:javascript,前端,密码框
0
投稿

猜你喜欢

  • 使用python BeautifulSoup库抓取58手机维修信息

    2022-08-10 01:55:20
  • Python中random模块生成随机数详解

    2023-06-13 16:11:52
  • 通过python爬虫赚钱的方法

    2023-04-27 11:48:17
  • Python基础之高级变量类型实例详解

    2021-11-09 11:07:40
  • jquery validate.js表单验证的基本用法入门

    2023-07-02 05:30:47
  • Python中def()函数的实战练习题

    2023-02-13 02:04:54
  • Python中优化NumPy包使用性能的教程

    2021-03-27 21:08:43
  • 解决python3 urllib中urlopen报错的问题

    2022-01-11 10:33:32
  • MySQL学习笔记5:修改表(alter table)

    2024-01-23 23:01:16
  • python中的txt文件转换为XML

    2021-12-05 10:45:48
  • mysql limit 分页的用法及注意要点

    2024-01-21 06:44:50
  • 关于超级链接的一些问题

    2007-12-07 14:00:00
  • python绘制彩虹图

    2021-10-09 03:07:05
  • python编写简易聊天室实现局域网内聊天功能

    2023-08-30 07:45:52
  • 再谈动态添加样式规则

    2009-09-02 13:10:00
  • mysql 8.0.20 winx64安装配置方法图文教程

    2024-01-27 02:09:01
  • python 提取key 为中文的json 串方法

    2022-02-08 04:55:06
  • Python的进程,线程和协程实例详解

    2021-05-05 04:35:59
  • openCV显著性检测的使用

    2022-10-20 12:25:02
  • 查询字符串中包含特殊字符的问题

    2009-01-09 13:13:00
  • asp之家 网络编程 m.aspxhome.com