JavaScript implements password box input verification

Sometimes it is necessary to perform simple verification on the front-end page when the user inputs to reduce the pressure on the server

For example, to limit the input length of a field:

There is an input range prompt message after the input box. If you enter the wrong length, it will become an error prompt message. If you enter the correct length, the correct prompt message will be displayed.

Implementation ideas

1. Write the input prompt information first.
2. Define error and correct classes and write corresponding styles
3. Get the input box element object, use the if statement to determine the length of the attribute value, display different prompt information content according to different results, and set different prompt information class names to switch styles.

Sample Code

<!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>Password box input prompt</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        input {
            outline: none;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/提示.png) no-repeat left center/16px 16px;
            padding-left: 20px;
        }
        
        .wrong {
            background-image: url(images/error.png);
            color: red;
        }
        
        .right {
            background-image: url(images/correct.png);
            color: green;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="inp">
        <p class="message">Please enter a 8-18 digit password</p>
    </div>
    <script>
        var password = document.querySelector('.inp');
        var message = document.querySelector('.message');

        password.onblur = function() {
            if (this.value.length < 8 || this.value.length > 18) {
                message.innerHTML = 'The password length is incorrect, it should be 8 to 18 characters';
                message.className = 'message wrong';
            } else {
                message.innerHTML = 'The password length is correct';
                message.className = 'message right';
            }
        }
    </script>
</body>

</html>

Page effect:

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:

JS realizes the password box effect
JS implements clicking the small eye in the form to display the password in the hidden password box
js implements the display/hide function of the input 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
How to implement the prompt information of the input password box using js (with html5 implementation method)
JavaScript implements prompts in input box (password box)
How to use JavaScript to input prompts in text boxes (password boxes)
JS realizes the disappearance and display effect of the password box according to the acquisition and loss of focus control text
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
JavaScript unlocks the front-end password box common function practices

<<: Detailed explanation of where the images pulled by docker are stored

>>: What does the n after int(n) in MySQL mean?