jQuery实用密码强度检测

前端之家收集整理的这篇文章主要介绍了jQuery实用密码强度检测前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JQ实用密码强度检测

通过正则来判断验证密码强弱并通过替换提示图片进行显示

素材图片,请自取:

html源码:

密码

css源码:

javascript源码:

if (false == enoughRegex.test($(this).val())) {
$('#level').removeClass('pw-weak');
$('#level').removeClass('pw-medium');
$('#level').removeClass('pw-h3');
$('#level').addClass(' pw-defule');
//密码小于六位的时候,密码强度图片都为灰色
}
else if (h3Regex.test($(this).val())) {
$('#level').removeClass('pw-weak');
$('#level').removeClass('pw-medium');
$('#level').removeClass('pw-h3');
$('#level').addClass(' pw-h3');
//密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
}
else if (mediumRegex.test($(this).val())) {
$('#level').removeClass('pw-weak');
$('#level').removeClass('pw-medium');
$('#level').removeClass('pw-h3');
$('#level').addClass(' pw-medium');
//密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等
}
else {
$('#level').removeClass('pw-weak');
$('#level').removeClass('pw-medium');
$('#level').removeClass('pw-h3');
$('#level').addClass('pw-weak');
//如果密码为6为及以下,就算字母、数字、特殊字符三项都包括,强度也是弱的
}
return true;
});
})

根据上述正则最终效果图如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章