密码验证

用户在创建一个账户时，需要设置一个密码。密码的复杂程度是安全的保障之一，但是有些用户在设置密码时，总是把密码设置的过于简单，导致用户账户的安全存在威胁。因此，为了提高用户账户的安全性，添加了一个JavaScript正则表达式验证密码复杂度的验证功能。

效果图是仿照腾讯企业邮箱修改密码时的验证方式-修改密码效果图：
在这里插入图片描述

我把它扣了下来，可能效果不如腾讯企业邮的，但是效果还是实现了。没有添加常见密码的验证。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><style>.rules_check_wrap{ position:absolute; top:274px; left:50%; margin-left:-14px; text-align:left; background:#fff; padding:10px; font-size:12px; color:#494949; border-radius:5px; border:1px solid #bbb; box-shadow:0px 0px 5px #ccc;}.rules_check_wrap h3{ font-weight:bold; color:#232323; margin:0; padding:5px 0 5px 19px; font-size:12px; height:14px; line-height:14px;}.rules_check_wrap li{ height:14px; line-height:14px; padding:4px 0;}.icon_rules_check{ float:left; height:14px; width:14px; margin:-2px 4px 0 -10px; background:url(./img/none.png) no-repeat;}.rules_check_pass{opacity:.6;filter:alpha(opacity=60);}.arrow_l, .arrow_r{position:absolute;top:0;left:0;margin-top:54px;margin-left:-20px;display:block; width:0; height:0; font-size:0; overflow:hidden; border:10px solid transparent; _border-color:tomato; _filter:chroma(color=tomato);}.arrow_l{ border-right-color:#bbb;}.arrow_r{ border-right-color:#fff; margin-left:-19px;}.rules_check_wrap{display:none;left:584px;top:85px;z-index:10;}.rules_check_wrap ul{list-style:none;padding:1px 10px;margin:1px;}.rules_check_pass .icon_rules_check{ background:url(./img/pass.png) 0px 2px no-repeat;}.rules_check_fail .icon_rules_check{background:url(./img/fail.png) 0px 2px no-repeat;}.rules_check_pass{opacity:.6;filter:alpha(opacity=60);}</style>
</head>
<body class="tbody" onload=""><script>$(function(){$("#newsecpwd").focus(function(){$(".rules_check_wrap").css("display","block");});$("#newsecpwd").blur(function(){$(".rules_check_wrap").css("display","none");});});function onchangpwd(){// var newpwd = document.getElementById("newsecpwd").value;var newpwd = $("#newsecpwd").val();var user = 'admin';if(newpwd != ''){//判断是否同时包含大写字母、小写字母和数字var baohan =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/;if(baohan.test(newpassword)){$(".rules_check_wrap ul li:eq(0)").removeClass();$(".rules_check_wrap ul li:eq(0)").addClass("rules_check_pass");}else{$(".rules_check_wrap ul li:eq(0)").removeClass();$(".rules_check_wrap ul li:eq(0)").addClass("rules_check_fail");$("input[name='repassword']").attr('disabled','true');}//密码长度判断if(newpassword.length < 6 && newpassword.length > 0 || newpassword.length > 18){$(".rules_check_wrap ul li:eq(1)").removeClass();$(".rules_check_wrap ul li:eq(1)").addClass("rules_check_fail");$("input[name='repassword']").attr('disabled','true');}else if(newpassword.length >=6 && newpassword.length <=18){$(".rules_check_wrap ul li:eq(1)").removeClass();$(".rules_check_wrap ul li:eq(1)").addClass("rules_check_pass");}else if(newpassword.length == 0){$(".rules_check_wrap ul li:eq(1)").removeClass();$("input[name='repassword']").attr('disabled','true');}//判断是否存在账户信息和空格if(/admin/.test(newpassword)){$(".rules_check_wrap ul li:eq(2)").removeClass();$(".rules_check_wrap ul li:eq(2)").addClass("rules_check_fail");$("input[name='repassword']").attr('disabled','true');}else if(/\s/.test(newpassword)){$(".rules_check_wrap ul li:eq(2)").removeClass();$(".rules_check_wrap ul li:eq(2)").addClass("rules_check_fail");$("input[name='repassword']").attr('disabled','true');}else{$(".rules_check_wrap ul li:eq(2)").removeClass();$(".rules_check_wrap ul li:eq(2)").addClass("rules_check_pass");}if((baohan.test(newpassword)) && (newpassword.length >=6 && newpassword.length <=18) && !(/admin/.test(newpassword)) && !(/\s/.test(newpassword))){$("input[name='repassword']").removeAttr('disabled');}//判断是否存在常见密码}else{$("ul li").removeClass();}}</script><div style="padding: 85px 104px;"><span id="modifypwd"><div style="margin:15px 0 8px 75px;">　原密码：<input type="password" id="oldsecpwd" name="oldsecpwd" class="txt" size="34"></div><div valid="password" style="margin-left:75px;margin-bottom:8px;" class="">　新密码：<input type="password" id="newsecpwd" name="newsecpwd" class="txt" size="34" oninput="onchangpwd()" onpaste="return false;"></div><div style="margin-left:75px;">重输密码：<input type="password" id="newsecpwd2" name="newsecpwd2" class="txt" size="34" onpaste="return false;"></div></span><div class="rules_check_relative"><div class="rules_check_wrap"><span class="rules_check_arrow"><span class="arrow_l"></span><span class="arrow_r"></span></span><h3>密码需满足以下要求：</h3><ul><li class=""><span class="icon_rules_check"></span>同时包含大写字母、小写字母和数字</li><li class=""><span class="icon_rules_check"></span>密码长度为 6-18 个字符</li><li class=""><span class="icon_rules_check"></span>不包含帐户信息与空格</li><!-- <li class=""><span class="icon_rules_check"></span>不是常见密码</li> --></ul></div></div></div>
</body>
</html>