JavaScript implements password box verification information

JavaScript implements password box verification information

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

Effect display:

Code Showcase

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="fontss2/iconfont.css" rel="external nofollow" />
  <style>
   .orginal {
    font-size: 13px;
    color:deepskyblue;
   }
   .wrong {
    font-size: 13px;
    color: red;  
   }
   .right {
    font-size: 13px;
    color: green;
   }
  </style>
 </head>
 <body>
  <p>
   <input type="text"><span class="orginal icon-wenhao iconfont">Please enter a 6-16 digit password</span>
  </p>
  <script>
   //Get the element object var input = document.querySelector('input');
   var span = document.querySelector('span');

   //Register event lost focus event input.onblur = function() {
    if (input.value.length > 0 && input.value.length < 6 || input.value.length > 16) {
     span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang wrong';
     span.innerHTML= 'Input error, please enter a 6-16 digit password';
    }else if(input.value.length >=6 && input.value.length <=16) {
     span.className = 'iconfont icon-yiyanzheng right';
     span.innerHTML = 'Enter correctly';
    }else {
     span.className = 'orginal icon-wenhao iconfont';
     span.innerHTML = 'Please enter a 6-16 character password';
    }
   }
  </script>
 </body>
</html>

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.

<<:  CSS3 border effects

>>:  TortoiseSvn Little Turtle Installation Latest Detailed Graphics Tutorial

Recommend

onfocus="this.blur()" is hated by blind webmasters

When talking about the screen reading software op...

Detailed explanation of the implementation principle of ACID transaction in Mysql

introduction As usual, let's start with a sce...

Detailed explanation of CSS style sheets and format layout

Style Sheets CSS (Cascading Style Sheets) is used...

Server stress testing concepts and methods (TPS/concurrency)

Table of contents 1 Indicators in stress testing ...

Use docker to deploy tomcat and connect to skywalking

Table of contents 1. Overview 2. Use docker to de...

js implements a simple countdown

This article example shares the specific code of ...

How to connect XShell and network configuration in CentOS7

1. Linux network configuration Before configuring...

5 commonly used objects in JavaScript

Table of contents 1. JavaScript Objects 1).Array ...

The final solution to Chrome's minimum font size limit of 12px

I believe that many users who make websites will ...

Docker uses dockerfile to start node.js application

Writing a Dockerfile Taking the directory automat...

MySQL joint table query basic operation left-join common pitfalls

Overview For small and medium-sized projects, joi...

Where is the project location deployed by IntelliJ IDEA using Tomcat?

After IntelliJ IDEA deploys a Javaweb project usi...

html+css+js to realize the function of photo preview and upload picture

Preface: When we are making web pages, we often n...

Detailed graphic explanation of how to clear the keep-alive cache

Table of contents Opening scene Direct rendering ...

ie filter collection

IE gave us a headache in the early stages of deve...