Implementing password box verification information based on JavaScript

This article example shares the specific code of JavaScript to implement password box verification information for your reference. The specific content is as follows

<!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>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./img/1.png) no-repeat left center;
            padding-left: 10px;
        }
        
        .wrong {
            color: red;
            background-image: url(img/2.png);
        }
        
        .right {
            color: green;
            background-image: url(img/3.png);
        }
    </style>
</head>
 
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">Please enter a 6-16 digit password</p>
    </div>
    <script>
        //Get the element var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //Register event ipt.onblur = function() {
            //According to the length of the form valueif (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = 'The number of digits you entered is incorrect';
            } else {
                message.className = 'message right';
                message.innerHTML = 'Enter correctly';
            }
        }
    </script>
</body>
 
</html>

Operation Results

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript implements prompts in input box (password box)
JS implementation of password box display password and hide password function example
Implementing the text prompt function code in the password box (password) based on JS
js implements the display/hide function of the input password box
How to implement the prompt information of the input password box using js (with html5 implementation method)
How to use JavaScript to input prompts in text boxes (password boxes)
JS implements clicking the small eye in the form to display the password in the hidden password box
javascript password box to prevent users from pasting and copying implementation code
The password box implemented by js regular expression is simple to make, and you can also replace it with the symbols you want to use
JS realizes the password box effect

<<: Detailed explanation of the deployment process of Docker Alibaba Cloud RocketMQ 4.5.1

>>: Example sharing of anchor tag usage in HTML