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. |
>>: TortoiseSvn Little Turtle Installation Latest Detailed Graphics Tutorial
Recommend
A comprehensive understanding of Vue.js functional components
Table of contents Preface React Functional Compon...
Implementation method of Mysql tree recursive query
Preface For tree-structured data in the database,...
Linux steps to configure local yum source, configure domestic yum source, and configure epel source
1. Configure local yum source 1. Mount the ISO im...
Sample code for seamless scrolling with flex layout
This article mainly introduces the sample code of...
How to configure two-way certificate verification on nginx proxy server
Generate a certificate chain Use the script to ge...
Solutions to MySQL batch insert and unique index problems
MySQL batch insert problem When developing a proj...
Detailed explanation of downloading, installing and using nginx server
download http://nginx.org/en/download.html Unzip ...
How to implement Hover drop-down menu with CSS
As usual, today I will talk about a very practica...
Index Skip Scan in MySQL 8.0
Preface MySQL 8.0.13 began to support index skip ...
Detailed explanation of querying JSON format fields in MySQL
During the work development process, a requiremen...
MySQL database design: detailed explanation of Schema operation method using Python
Before the arrow was shot, the bow whispered to t...
In-depth explanation of iterators in ECMAScript
Table of contents Preface Earlier iterations Iter...
Solution to the welcome to emergency mode message when booting CentOS7.4
Today I used a virtual machine to do an experimen...
Implementation of master-slave replication in docker compose deployment
Table of contents Configuration parsing Service C...
Tutorial on installing VMWare15.5 under Linux
To install VMWare under Linux, you need to downlo...