js 简单的密码强度提示

最新推荐文章于 2025-09-26 02:00:31 发布

原创

最新推荐文章于 2025-09-26 02:00:31 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript进行密码强度的简单提示。虽然作者倾向于面向对象的方法，但对这方面的知识不太熟悉，欢迎读者留言分享更好的实现建议。

<!DOCTYPE html>

<html>



<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

#passStrength {

height: 6px;

width: 120px;

border: 1px solid #ccc;

padding: 2px;

}



.strengthLv1 {

background: red;

height: 6px;

width: 40px;

}



.strengthLv2 {

background: orange;

height: 6px;

width: 80px;

}



.strengthLv3 {

background: green;

height: 6px;

width: 120px;

}

</style>

</head>



<body>

<input type="text" name="pass" id="pass" value="womenlaiiztong" maxlength="16" />

<div class="pass-wrap">

密码强度:

<div id="passStrength"></div>

</div>




<script type="text/javascript">

function PasswordStrength(passwordID, strengthID) {

let password = document.getElementById(passwordID);

let id = document.getElementById(strengthID);

let div = document.cr