SoFunction
Updated on 2025-03-04

JS regular expression verification password strength

This article shares the specific code for JS regular expression verification password strength for your reference. The specific content is as follows

Code 1:

<!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:300px;
  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 >
 <label for="pwd">password</label>
 <input type="text"  maxlength="16"><!--Extracurricular topics-->
 <div>
  <em>password强度：</em>
  <em ></em>
  <div  class="strengthLv0"></div>
 </div>
</div>
<script src=""></script>
<script>
 
 /*
  *
  * Password: numbers, letters, special symbols
  *
  * Password: Only numbers - either only letters, or only special symbols - level 1 - weak
  * Combination of pairs: numbers and letters, numbers and special symbols, letters and special symbols ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  * All three are: numbers, letters and special symbols--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  *
  * */
 
 //Get text box registration keyboard lift event my$("pwd").onkeyup=function () {
  //Every time the keyboard is lifted, you must 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  //If the length of the password is less than 6, there is no need to make a judgment  if(>=6){
   var lvl=getLvl();
   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 to the corresponding level function getLvl(pwd) {
  var lvl=0;//Default is level 0  //Is there any number, letter, or special symbol in the password?  if(/[0-9]/.test(pwd)){
   lvl++;
  }
  //Judge whether there are letters in the password  if(/[a-zA-Z]/.test(pwd)){
   lvl++;
  }
  //Judge whether there are special symbols in the password  if(/[^0-9a-zA-Z_]/.test(pwd)){
   lvl++;
  }
  return lvl;//1 3
 }
 
</script>
 
</body>
</html>

Optimization code 2:

<!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:300px;
  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 >
 <label for="pwd">password</label>
 <input type="text"  maxlength="16"><!--Extracurricular topics-->
 <div>
  <em>password强度：</em>
  <em ></em>
  <div  class="strengthLv0"></div>
 </div>
</div>
<script src=""></script>
<script>
 
 //Get text box registration keyboard lift event my$("pwd").onkeyup=function () {
  //Every time the keyboard is lifted, you must 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  //If the length of the password is less than 6, there is no need to make a judgment//  if(>=6){
//   var lvl= getLvl();
//   my$("strengthLevel").className="strengthLv"+lvl;
//  }else{
//   my$("strengthLevel").className="strengthLv0";
//  }
  my$("strengthLevel").className="strengthLv"+(>=6?getLvl() :0);
 };
 
 //Give me the password and I will return to the corresponding level function getLvl(pwd) {
  var lvl=0;//Default is level 0  //Is there any number, letter, or special symbol in the password?  if(/[0-9]/.test(pwd)){
   lvl++;
  }
  //Judge whether there are letters in the password  if(/[a-zA-Z]/.test(pwd)){
   lvl++;
  }
  //Judge whether there are special symbols in the password  if(/[^0-9a-zA-Z_]/.test(pwd)){
   lvl++;
  }
  return lvl;//The minimum value is 1, the maximum value is 3 }
 
</script>
</body>
</html>

/**
  * Get the specified tag object
  * @param id tag id attribute value
  * @returns {Element} Returns the specified tag object according to the id attribute value
  */
function my$(id) {
 return (id);
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.