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
How to check disk usage in Linux
1. Use the df command to view the overall disk us...
Nodejs global variables and global objects knowledge points and usage details
1. Global Object All modules can be called 1) glo...
Understanding of web design layout
<br />A contradiction arises. In small works...
Detailed explanation of Zabbix installation and deployment practices
Preface Zabbix is one of the most mainstream op...
Detailed Example of MySQL curdate() Function
MySQL CURDATE Function Introduction If used in a ...
Detailed explanation of Bind mounts for Docker data storage
Before reading this article, I hope you have a pr...
Detailed example of remotely connecting to Docker using TLS encrypted communication
By default, Docker runs over a non-networked UNIX...
Docker file storage path, modify port mapping operation mode
How to get the container startup command The cont...
Commonplace talk about the usage of MYSQL pattern matching REGEXP and like
like LIKE requires the entire data to match, whil...
How to quickly build a LAMP environment on CentOS platform
This article uses an example to describe how to q...
Detailed explanation of axios encapsulation and API interface management in React project
Table of contents Preface Install Introduction Sw...
MySQL 8.0.12 installation graphic tutorial
MySQL8.0.12 installation tutorial, share with eve...
Summary of some small issues about MySQL auto-increment ID
The following questions are all based on the Inno...
The whole process of installing and configuring Harbor1.7 on CentOS7.5
1. Download the required packages wget -P /usr/lo...
Regarding the Chinese garbled characters in a href parameter transfer
When href is needed to pass parameters, and the p...