JQ实用密码强度检测
通过正则来判断验证密码强弱并通过替换提示图片进行显示。
素材图片,请自取:
html源码:
rush:xhtml;">
密码
|
|
css源码:
rush:css;">
.tbl-txt{font-size:14px;}
.tbl-txt input{padding:0 5px; height:22px; line-height:22px; margin-b
ottom:6px;}
.pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
.pw-bar{background: url(images/pwd-1.png) no-repeat; position:relative; top:1px;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background: url(images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-h3 .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
javascript源码:
rush:js;">
$(function(){
$('#pass').keyup(function () {
var h3Regex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$","g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$","g");
var enoughRegex = new RegExp("(?=.{6,}).*","g");
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;
});
})
根据上述正则最终效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
相关文章
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id="...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...