JavaScript regular verification password strength implementation method
exhibit
design Password strength analysis The password consists of numbers, letters, and special symbols
Code Version 1: Basic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:100px;
top:100px;
}
.strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<body>
<div id="dv">
<label for="password">Password</label>
<input type="text" id="password" maxlength="16">
<div>
<b>Password strength:</b>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
<script>
//Get the text box to register the keyboard up event my$("password").onkeyup=function () {
//Each time the keyboard is lifted, the content of the text box must be obtained, and what is in the text box must be verified, and a level must be obtained, and then the div below will display the corresponding color. //If the password length is less than 6, there is no need to judge if (this.value.length>=6) {
var lvl = getLvl(this.value);
if(lvl==1){
//weak my$("strengthLevel").className="strengthLv1";
}else if(lvl==2){
my$("strengthLevel").className="strengthLv2";
}else if(lvl==3){
my$("strengthLevel").className="strengthLv3";
}else{
my$("strengthLevel").className="strengthLv0";
}
}else{
my$("strengthLevel").className="strengthLv0";
}
};
//Give me the password and I will return the corresponding level function getLvl(password) {
var lvl=0;//Default is level 0//Whether the password contains numbers, letters, or special symbols if(/[0-9]/.test(password)){
lvl++;
}
// Check if there are letters in the password if(/[a-zA-Z]/.test(password)){
lvl++;
}
// Check if there are any special symbols in the password if(/[^0-9a-zA-Z_]/.test(password)){
lvl++;
}
return lvl;//1 3
}
</script>
</body>
</html>The above code is a bit redundant, so we upgrade and rewrite it Version 2: Upgrade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:100px;
top:100px;
}
.strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<body>
<div id="dv">
<label for="password">Password</label>
<input type="text" id="password" maxlength="16"><!--Extracurricular Topics-->
<div>
<b>Password strength:</b>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<!-- <script src="common.js"></script> -->
<script>
function my$(id) {
return document.getElementById(id);
}
//Get the text box to register the keyboard up event my$("password").onkeyup=function () {
//Each time the keyboard is lifted, get the content in the text box, verify what is in the text box, get a level, and then the div below displays the corresponding color my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};
//Give me the password and I will return the corresponding level function getLvl(password) {
var lvl=0;//Default is level 0//Whether the password contains numbers, letters, or special symbols if(/[0-9]/.test(password)){
lvl++;
}
// Check if there are letters in the password if(/[a-zA-Z]/.test(password)){
lvl++;
}
// Check if there are any special symbols in the password if(/[^0-9a-zA-Z_]/.test(password)){
lvl++;
}
return lvl; //The minimum value is 1, the maximum value is 3
}
</script>
</body>
</html>This is the end of this article about the implementation method of JavaScript regular password verification. For more relevant JavaScript regular password strength content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to change the default character set of MySQL to utf8 on MAC
>>: Windows system mysql5.7.18 installation graphic tutorial
Recommend
Linux uses binary mode to install mysql
This article shares the specific steps of install...
Solution to the problem that the configuration file my.cnf in MySQL cannot be started due to permission issues
This article mainly introduces the relevant solut...
MySQL 5.6.27 Installation Tutorial under Linux
This article shares the installation tutorial of ...
Solution to uninstalling Python and yum in CentOs system
Background of the accident: A few days ago, due t...
Detailed explanation of the difference between a href=# and a href=javascript:void(0)
a href="#"> After clicking the link, ...
Detailed explanation and examples of database account password encryption
Detailed explanation and examples of database acc...
Solution to the problem "Table mysql.plugin doesn't exist" when deploying MySQL
Today I deployed the free-installation version of...
Analysis and solution of the cause of web page style loss caused by browser automatic form filling
From the backend to the front end, what a tragedy....
Vue Basics Listener Detailed Explanation
Table of contents What is a listener in vue Usage...
Example explanation of MySQL foreign key constraints
MySQL's foreign key constraint is used to est...
Gogs+Jenkins+Docker automated deployment of .NetCore steps
Table of contents Environmental Description Docke...
Layui implements the login interface verification code
This article example shares the specific code of ...
Ubuntu 20.04 connects to wifi (2 methods)
I recently installed Ubuntu 20.04 and found that ...
Storage engine and log description based on MySQL (comprehensive explanation)
1.1 Introduction to storage engines 1.1.1 File sy...
How to install Element UI and use vector graphics in vue3.0
Here we only focus on the installation and use of...