正则表达式密码验证内容,大小写,符号,特殊符号.用于三级等保,解决弱口令.

本文链接：https://blog.youkuaiyun.com/qq_34538575/article/details/79174498

本文介绍了一个使用纯JavaScript编写的密码强度检测器。通过正则表达式判断密码中的数字、字母大小写及特殊符号，并根据这些元素的数量来评估密码强度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此篇文章是一个demo.复制下来直接粘贴到任意HTML就可使用.适合新手

使用纯JS书写

代码的思路是当拿到密码的值以后,对密码中的数值运用正则表达式就行判断,分设四个遍历用于表示存在,num1 num2 num3 num3

使用正则表达式进行最简单的数字,字母大小写,特殊符号判断,如果存在就给对应的numX赋值为1,在最后的时候进行加和,然后通过对总值的判断进行判断密码的强弱性,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .mm-body{
                position: relative;
                height: 100px;
                width: 450px;

            }
            .mm-top{
                height:35px;
                width: 450px;
            }
            .mm-sr{
                height:30px;
                width: 100px; 
                float: left;
                text-align: center; 
                line-height: 30px;
            }
            #mm-pwd{
                float: left;
                height:25px;
                background-color: ghostwhite;
                border-radius: 5px; 
                width: 150px;
            }
        .mm-btm{
                height: 40px;
                width: 140px;
                position: relative;
                margin-left: 110px;
            }
        #lv1,#lv2,#lv3{
                height: 30px;
                width: 40px;
                border-top: 4px solid gainsboro; 
                margin-left: 3px;
                float: left;
                font-size: 18px;
                text-align: center;
                line-height: 25px;
            }
        </style>
    </head>
    
    <body>
       <div class="mm-body">
            <div class="mm-top">
                <span class="mm-sr">请输入密码:</span>
                <form method="get" action="data.html" >
            <input type="password" id="mm-pwd" onblur="show()" onpaste="return false" />
            </form>
            <span id="mm-pd"style="color: red; font-size: 12px; line-height: 30px;"></span>
            </div>
            <div class="mm-btm">                
              <table border="0px" cellpadding="0px" cellspacing="1px" >
                <tr height="20px" >
                    <td width="40px"  id="ruo" style="border-top: 3px solid darkgrey;">弱</td>
                    <td width="40px"  id="zhong" style="border-top: 3px solid darkgrey;">中</td>
                    <td width="40px"  id="qiang" style="border-top: 3px solid darkgrey;">强</td>
                </tr>
            </table>                        
            </div>
        </div>
    </body>
</html>
<script language="JavaScript">
function show(){
	
  var a=document.getElementById("mm-pwd").value;      
  
  if(a.length==0){
		document.getElementById("mm-pd").innerHTML="密码不能为空!";
  
    }
    else if(a.length<8){
        document.getElementById("mm-pd").innerHTML="密码长度不能小于8位!";   
    }
    
    else if(a.length>=8&&a.length<=20){
        document.getElementById("mm-pd").innerHTML="";	  
		var num1 = 0;
		var num2 = 0;
		var num3 = 0;
		var num4 = 0;	
				
				if(a.match(/\d+/g)){
					var	num1=1;
					console.log("数字")						
				} 					
				if(a.match(/[a-z]+/g)){
					var	num2=1;
					console.log("小写字母")	
				}
				if(a.match(/[A-Z]+/g)){
					var	num3=1;
					console.log("大写字母")	
				} 					
													
				if(a.match(/[^\w]+/g)){
					var	num4=1;
					console.log("特殊符号")	
				} 								
			num= num1+num2+num3+num4;
			 if(num==2){
                 document.getElementById("ruo").style.borderTopColor="red";                   
            }
            else if(num == 3){
                document.getElementById("ruo").style.borderTopColor="red";    
                 document.getElementById("zhong").style.borderTopColor="yellow";    
            }
            else if(num == 4){
                 document.getElementById("ruo").style.borderTopColor="red";
                 document.getElementById("zhong").style.borderTopColor="yellow";
                 document.getElementById("qiang").style.borderTopColor="green";    
            }else {
					alert("密码强度太低请更换密码")
				  document.getElementById("mm-pwd").value="";
			}
    }			
    else if(a.length>20){
        document.getElementById("mm-pd").innerHTML="密码长度大于20个字符!";
        document.getElementById("ruo").style.borderTopColor="gainsboro";
        document.getElementById("zhong").style.borderTopColor="gainsboro";
        document.getElementById("qiang").style.borderTopColor="gainsboro";
    }
    
	
     }
    
</script>