给密码输入框定义格式要求，并检查是否符合要求，错误时给出提示信息

本文链接：https://blog.csdn.net/bsf000000___/article/details/131800553

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个带有格式要求的密码输入框。当用户输入不符合6到16位长度要求的密码时，会显示错误提示信息。此外，还包括了一个切换密码明文和密文显示的眼睛图标功能。

摘要由CSDN通过智能技术生成

给密码输入框定义格式要求，并检查是否符合要求，错误时给出提示信息

一、代码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            height: 5vmin;
            width: 30vmin;
        }

        #image {
            height: 4vmin;
            width: 4vmin;
            position: absolute;
            top: 1vmin;
            left:26.5vmin;
        }

        #tdPassword {
            width: 35vmin;
            position: relative;
        }

        #tdExegesis {
            width: 5vmin;
            height: 5vmin;
            margin-left:-4vmin;
        }

        .tdExegesis {
            position: relative;
            width:30vmin;
        }

        .character {
            display: inline-block;
            position: absolute;
            top: 1.5vmin;
            font-size:1vmin;
        }
    </style>
</head>

<body>
    <table cellspacing="0" align="center">
        <tr>
            <td><input type="text" name="username" placeholder="请输入用户名" id="username" autocomplete="off"></td>
            <td></td>
        </tr>
        <tr>
            <td id="tdPassword"><input type="password" name="password" id="password" placeholder="请输入密码"
                    autocomplete="off">
                <input type="image" name="image" id="image" src="./images/closeeye.jpg">
            </td>
            <td class="tdExegesis"><img id="tdExegesis" src="./images/dangerous.jpg" alt="">
                <div class="character">请你输入6~16位</div>
            </td>
        </tr>
    </table>
    <script>
        var password = document.getElementById('password')
        var image = document.getElementById('image')
        var character=document.querySelector('.character')
        var tdExegesis=document.getElementById('tdExegesis')
        var flag = 0
        image.onclick = function () {
            if (flag == 0) {
                image.src = './images/openeye.jpg'
                password.type = 'text'
                flag = 1
            } else {
                image.src = './images/closeeye.jpg'
                password.type = 'password'
                flag = 0
            }
        }
        password.onblur=function(){
            if(this.value.length<6||this.value.length>16){
                tdExegesis.src='./images/error.jpg'
                character.innerHTML='格式错误，请输入6~16位'
                character.style.color='red'
            }
            else{
                tdExegesis.src='./images/true.jpg'
                character.innerHTML='输入成功'
                character.style.color='green'
            }
        }
    </script>
</body>

</html>

二、代码分析

在样式（style）中，设置了输入框和图像的样式。#image 设置了眼睛图标的样式，使用了绝对定位（position: absolute），并设置了 top 和 left 属性来控制图标在密码输入框中的位置。
#tdPassword 设置了密码输入框的样式，并将其相对定位（position: relative），以便对其内部元素进行定位。
.tdExegesis 设置了显示提示信息的单元格的样式，使用了相对定位。通过设置 margin-left: -4vmin，使得图标和文字在单元格中居中显示。
.character 设置了文字提示的样式，使用了绝对定位（position: absolute），并通过设置 top 属性使其在单元格中垂直居中。还设置了 font-size 属性来调整文字的大小。
在 JavaScript 部分，根据用户点击眼睛图标的操作来切换密码的可见性。通过修改图标的 src 属性和密码输入框的 type 属性来实现。
password.onblur 事件处理程序在密码输入框失去焦点时触发。它检查密码的长度是否满足要求，并根据结果设置图标和文字的内容、颜色和图片。如果密码长度不符合要求，将显示格式错误的提示信息；如果密码长度在要求范围内，将显示输入成功的提示信息。