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
MySQL query example explanation through instantiated object parameters
This article will introduce how to query data in ...
IE6 BUG and fix is a preventive strategy
Original article: Ultimate IE6 Cheatsheet: How To...
How to create a table by month in MySQL stored procedure
Without going into details, let's go straight...
HTML basics - CSS style sheets, style attributes, format and layout details
1. position : fixed Locked position (relative to ...
Comparing Node.js and Deno
Table of contents Preface What is Deno? Compariso...
Detailed tutorial on installing mysql 5.7.26 on centOS7.4
MariaDB is installed by default in CentOS, which ...
Five ways to achieve automatic page jump in HTML
In the previous article, we introduced three comm...
Tutorial on installing mysql5.7.18 on mac os10.12
I searched the entire web and found all kinds of ...
React handwriting tab switching problem
Parent File import React, { useState } from '...
How to query the intersection of time periods in Mysql
Mysql query time period intersection Usage scenar...
Code block highlighting can be copied and displayed js plug-in highlight.js + clipboard.js integration
Mainly from two aspects: 1. Highlight/Line Break ...
Explanation of the new feature of Hadoop 2.X, the recycle bin function
By turning on the Recycle Bin function, you can r...
jQuery implements navigation bar effect with expansion animation
I designed and customized a navigation bar with a...
Pure CSS to achieve the text icon function by taking the first character of the string
How to implement text icons through CSS /*icon st...
Teach you how to build a react+antd project from scratch
The previous articles were all my own learning lo...