JavaScript正则验证密码强弱度

本文主要是介绍JavaScript正则验证密码强弱度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 展示
- 设计
- - 密码强弱度分析
- 代码
- - 版本一：基本
  - 版本二：升级

展示

在这里插入图片描述

设计

密码强弱度分析

密码由数字,字母,特殊符号组成

密码: 只有数字- 或者是只有字母,或者是只有特殊符号——1级：弱
两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号——2级：中
三者都有: 数字和字母和特殊符号——3级：强

代码

版本一：基本

<!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">密码</label><input type="text" id="password" maxlength="16"><div><b>密码强度：</b><em id="strength"></em><div id="strengthLevel" class="strengthLv0"></div></div>
</div>
<script>function my$(id) {return document.getElementById(id);}//获取文本框注册键盘抬起事件my$("password").onkeyup=function () {//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色//如果密码的长度是小于6的,没有必要判断if(this.value.length>=6){var lvl=getLvl(this.value);if(lvl==1){//弱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";}};//给我密码,我返回对应的级别function getLvl(password) {var lvl=0;//默认是0级//密码中是否有数字,或者是字母,或者是特殊符号if(/[0-9]/.test(password)){lvl++;}//判断密码中有没有字母if(/[a-zA-Z]/.test(password)){lvl++;}//判断密码中有没有特殊符号if(/[^0-9a-zA-Z_]/.test(password)){lvl++;}return lvl;//1  3}</script>
</body>
</html>

上面代码有点冗余，我们对其进行升级改写

版本二：升级

<!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">密码</label><input type="text" id="password" maxlength="16"><!--课外话题--><div><b>密码强度：</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);}//获取文本框注册键盘抬起事件my$("password").onkeyup=function () {//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);};//给我密码,我返回对应的级别function getLvl(password) {var lvl=0;//默认是0级//密码中是否有数字,或者是字母,或者是特殊符号if(/[0-9]/.test(password)){lvl++;}//判断密码中有没有字母if(/[a-zA-Z]/.test(password)){lvl++;}//判断密码中有没有特殊符号if(/[^0-9a-zA-Z_]/.test(password)){lvl++;}return lvl;//最小的值是1,最大值是3}</script>
</body>
</html>