JavaScript implements password box input verification

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?

Recommend

Docker and iptables and implementation of bridge mode network isolation and communication operations

Docker provides multiple networks such as bridge,...

Vue integrates a rich text editor that supports image zooming and dragging

need: According to business requirements, it is n...

A brief analysis and sharing of the advantages and disadvantages of three tree structure table designs in MYSQL

Table of contents Introduction question Design 1:...

Solution to HTML encoding problem in IE6 that causes JS error and CSS not being applied

It was found in the test that when the page defini...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...

Detailed explanation of the use of grid properties in CSS

Grid layout Attributes added to the parent elemen...

How does MySQL ensure master-slave consistency?

Table of contents The basic principle of MySQL ma...

Docker deployment springboot project example analysis

This article mainly introduces the example analys...

Share 9 Linux Shell Scripting Tips for Practice and Interviews

Precautions 1) Add interpreter at the beginning: ...

Methods and steps to build nginx file server based on docker

1. Create a new configuration file docker_nginx.c...

Complete steps for vue dynamic binding icons

0 Differences between icons and images Icons are ...

Solution to the problem of English letters not wrapping in Firefox

The layout of text has some formatting requiremen...

HTML Editing Basics (A Must-Read for Newbies)

Open DREAMWEAVER and create a new HTML. . Propert...

How to manage users and groups when running Docker

Docker is a management tool that uses processes a...

In-depth understanding of the seven communication methods of Vue components

Table of contents 1. props/$emit Introduction Cod...