用户登陆
站点日历
日志搜索
站点统计
最新评论
友情链接
其他信息
这些措施包括要求密码包含特定数量的大小写字母、数字和特殊字符，以及限制密码长度。
今天我们这里提供一种简单有效的密码强度css提示效果实现方案，效果如下：
实现代码如下：
CSS样式代码：
js代码
下面是简单的实现逻辑，主要检测密码长度，字符种类数。
要求：大写字母、小写字母、标点符合、数字至少包含三种。密码不少于8个字符。
强度值达到 3 即可满足条件。
代码依赖jQuery。
如果需要更复杂的密码强度检测，可以使用开源js库 zxcvbn 【 dropbox 开发的一个JavaScript密码强度估算库】。
| [复制到剪贴板] |
<style type="text/css">
.pbar_wrap {
width: 128px;
height: 15px;
display: inline-block;
vertical-align: middle;
overflow: visible;
border-radius: 5px;
}
.pbar_item1 {background-color: #cccccc;}
.pbar_item2 {background-color: #cccccc;}
.pbar_item3 {background-color: #cccccc;}
.pbar_item4 {background-color: #cccccc;}
.pbar_text {
display: inline-block;
color: #aaa;
font-weight: bold;
margin-left: 5px;
-webkit-transition: .2s;
transition: .2s;
}
.pbar_item {
margin-left: 2px;
display: inline-block;
height: 100%;
width: 30px;
border-radius: 5px;
float: left;
-webkit-transition: background-color .2s, visisility .1s;
transition: background-color .2s, visisility .1s;
}
.pbar_item1.active { background-color: #FF4B47;}
.pbar_item2.active {background-color: #F9AE35;}
.pbar_item3.active {background-color: #2DAF7D;}
.pbar_item4.active { background-color: green;}
</style>
js代码
下面是简单的实现逻辑，主要检测密码长度，字符种类数。
要求：大写字母、小写字母、标点符合、数字至少包含三种。密码不少于8个字符。
强度值达到 3 即可满足条件。
代码依赖jQuery。
如果需要更复杂的密码强度检测，可以使用开源js库 zxcvbn 【 dropbox 开发的一个JavaScript密码强度估算库】。
| [复制到剪贴板] |
<script type="text/javascript">
function changeText(el, text, color) {
el.text(text).css('color', color);
};
function pwstrength(val){
let len = val.length;
if(len === 0) return 0;
if(len < 8) return 1;
var lv = 0;
if(val.match(/[a-z]/g)){lv++;}
if(val.match(/[A-Z]/g)){lv++;}
if(val.match(/[0-9]/g)){lv++;}
if(val.match(/(.[^a-zA-Z0-9])/g)){lv++;}
return lv;
}
$('#password').keyup(function(){
let that = this;
let len = that.value.length;
const pbText = $('.pbar_text');
var lv = pwstrength(that.value);
if (len === 0 || lv === 0) {
$('.pbar_item').each(function() {
$(this).removeClass('active')
});
changeText(pbText, '空', '#aaa');
} else if (lv == 1) {
$('.pbar_item1').addClass('active');
$('.pbar_item2').removeClass('active');
$('.pbar_item3').removeClass('active');
$('.pbar_item4').removeClass('active');
changeText(pbText, '弱', '#FF4B47');
} else if (lv == 2) {
$('.pbar_item1').addClass('active');
$('.pbar_item2').addClass('active');
$('.pbar_item3').removeClass('active');
$('.pbar_item4').removeClass('active');
changeText(pbText, '中', '#F9AE35');
} else if (lv == 3) {
$('.pbar_item1').addClass('active');
$('.pbar_item2').addClass('active');
$('.pbar_item3').addClass('active');
$('.pbar_item4').removeClass('active');
changeText(pbText, '高', '#2DAF7D');
} else {
$('.pbar_item').each(function() {
$(this).addClass('active');
});
changeText(pbText, '安全', 'green');
}
});
</script>
最后记住一条安全准则：永远不要相信客户端提交的数据
虽然我们在前端检查了密码强度，在后端我们还是需要再次检查一面。
php检测代码如下：
在 CodeIgniter4 中我们可以把这个函数放到 helper 中。
如果前端使用了 zxcvbn 库，后端也可以使用 zxcvbn-php 库。
php检测代码如下：
| [复制到剪贴板] |
/**
* 返回强度0 -- 4
*/
function form_pwstrength(string $val): int
{
if( empty($val) ) return 0;
if( strlen($val) < 8 ) return 1;
$lv = 0;
if(preg_match("/[0-9]/", $val) ){$lv++;}
if(preg_match("/[a-z]/", $val) ){$lv++;}
if(preg_match("/[A-Z]/", $val) ){$lv++;}
if(preg_match("/[^a-zA-Z0-9]/", $val) ){$lv++;}
return $lv;
}
在 CodeIgniter4 中我们可以把这个函数放到 helper 中。
如果前端使用了 zxcvbn 库，后端也可以使用 zxcvbn-php 库。
一些文件下载
前端js库文件 zxcvbn.js后端php库文件 zxcvbn-php-1.3.1.zip
