灵感方法来源:https://www.zhangxinxu.com/wordpress/2021/11/html-meter-password/
meter标签 + zxcvbn算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="password" oninput="checkPassword()">
<!--
min: 最小值,默认0
max: 最大值,默认1
low: 低值区上限,如果在[min, low]区间,会有特殊视觉效果
high: 高值区下限,如果在[high, max]区间,会有特殊视觉效果
optimum: 指示最优取值或区间, e.g. [min, optimum, low] lower区间是最佳范围
-->
<!-- guesses_log10 的值在 12 以上,密码强度就已经很强了,考虑到弱中强三种状态的色条范围是三等分 -->
密码强度:<meter min="0" max="12" low="4" high="8" optimum="10" />
</body>
</html>
<!-- 密码强度的计算: 使用开源的公认的算法 → zxcvbn:https://github.com/dropbox/zxcvbn -->
<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
let objResult = zxcvbn('your password');
/**
* objResult 包含下面这些属性
*
* @param {number} calc_time - zxcvbn 计算此密码强度花费的时间,单位是毫秒 ms
* @param {object} crack_times_display - (不同运算力下的破解时间,字符描述展示)
* @param {object} crack_times_seconds - (不同运算力下的破解时间,数值展示)
* @param {object} feedback - 反馈与建议
* @param {number} guesses - 估计破解密码所需时间
* @param {number} guesses_log10 - guesses lg10的运算结果
* @param {string} password - 你输入的密码
* @param {number} score - 密码安全性得分 | 整数 0~4
* @param {array} sequence - 预测计算
* */
console.log(objResult);
</script>
<script>
function checkPassword() {
const inputValue = document.querySelector('input').value;
const intension = document.querySelector('meter');
intension.value = zxcvbn(inputValue).guesses_log10;
}
</script>
加点小细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 确定强度条的宽高,用于平均分块 */
::-webkit-meter-bar {
width: 120px;
height: 12px;
border: 0;
/* 用遮罩添加间隔 */
/*-webkit-mask: linear-gradient(to right, red 39px, transparent 0 41px, orange 0 79px, transparent 0 81px, green 0);*/
}
/* value 处于 [min, low]时 */
::-webkit-meter-even-less-good-value {
background: red;
}
/* value 处于 [low, optimum]时 */
::-webkit-meter-suboptimum-value {
/*background: linear-gradient(to right, red 40px, orange 0);*/
background: linear-gradient(to right, red 40px, orange 0);
}
/* value 处于 [optimum, max]时 */
::-webkit-meter-optimum-value {
background: linear-gradient(to right, red 40px, orange 0 80px, green 0);
}
/* 用伪元素添加间隔 */
meter::before {
content: '';
display: block;
width: 40px;
height: 12px;
box-sizing: border-box;
border-width: 0 2px 0 2px;
border-color: #fff;
border-style: solid;
position: relative;
left: 39px;
top: 13px;
z-index: 2;
margin-top: -12px;
}
/* 用伪元素添加文字说明 */
meter::after {
content: '强 中 弱 aaaaaaaaaaaaaaaaaa';
display: inline-block;
width: 120px;
line-height: 20px;
height: 20px;
overflow: hidden;
text-align: justify;
box-sizing: border-box;
padding: 0 15px;
position: absolute; /* 脱离文本流,不挤占位置 */
font-weight: bold;
-webkit-text-fill-color: transparent;
background: linear-gradient(to right, red 40px, orange 0 80px, green 0);
-webkit-background-clip: text;
}
</style>
</head>
<body>
<input type="password" oninput="checkPassword()">
<!--
min: 最小值,默认0
max: 最大值,默认1
low: 低值区上限,如果在[min, low]区间,会有特殊视觉效果
high: 高值区下限,如果在[high, max]区间,会有特殊视觉效果
optimum: 指示最优取值或区间, e.g. [min, optimum, low] lower区间是最佳范围
-->
<!-- guesses_log10 的值在 12 以上,密码强度就已经很强了,考虑到弱中强三种状态的色条范围是三等分 -->
密码强度:<meter min="0" max="12" low="4" high="8" optimum="10" />
</body>
</html>
<!-- 密码强度的计算: 使用开源的公认的算法 → zxcvbn:https://github.com/dropbox/zxcvbn -->
<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
let objResult = zxcvbn('your password');
/**
* objResult 包含下面这些属性
*
* @param {number} calc_time - zxcvbn 计算此密码强度花费的时间,单位是毫秒 ms
* @param {object} crack_times_display - (不同运算力下的破解时间,字符描述展示)
* @param {object} crack_times_seconds - (不同运算力下的破解时间,数值展示)
* @param {object} feedback - 反馈与建议
* @param {number} guesses - 估计破解密码所需时间
* @param {number} guesses_log10 - guesses lg10的运算结果
* @param {string} password - 你输入的密码
* @param {number} score - 密码安全性得分 | 整数 0~4
* @param {array} sequence - 预测计算
* */
console.log(objResult);
</script>
<script>
function checkPassword() {
const inputValue = document.querySelector('input').value;
const intension = document.querySelector('meter');
intension.value = zxcvbn(inputValue).guesses_log10;
}
</script>