模仿163邮箱注册密码校验demo_类似网易注册的校验规则-CSDN博客

本文链接：https://blog.csdn.net/weixin_34902467/article/details/53420607

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/pwd_yz.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/pwd_yz.js"></script>
<title>密码强度demo</title>
</head>
<body>
<div class="regForm">
<dl class="regForm-item">
<dt class="regForm-item-tit">密码</dt>
<dd class="regForm-item-ct">
<input type="password" id="user_password" name="password" class="ipt norWidthIpt" style="ime-mode:disabled;" οnblur="on_blur(this.value);" οnfοcus="on_focus(this.value);" οnkeyup="on_keyup(this.value);"/>
<div id="tips_id" class="tips" style="position: relative;">
<div id="pwd_strong">
<span class="s1">弱</span>
<span class="s2">中</span>
<span class="s3">强</span>
</div>
<span class="txt-tips">6~16个字符，区分大小写</span>
</div>
<div class="tips" id="tips_ts">
<span class="txt-err" id="txt-err">密码长度应为6~16个字符</span>
</div>
<div class="tips">
<span class="txt-succ" id="pwd_view"></span>
</div>
</dd>
</dl>
</div>
</body>

</html>

css：

body{line-height:160%;font-size:12px;color:#555;text-align:center;background-color:#F9F9F9;}
body,h1,h2,h3,h4,h5,h6,ul,ol,li,form,p,dl,dt,dd,table,th,td,img,blockquote{margin:0;padding:0;border:0;}
.regForm{ width:500px; background: #fff; margin:200px auto; text-align: left; }
.regForm-item{ position: relative; }
.regForm-item-tit {
width: 75px;
position: absolute;
left: 0;
top: 13px;
text-align: right;
font-size: 14px;
}
.regForm-item-ct {
padding: 8px 0 8px 85px;
zoom: 1;
position: relative;
}
.regForm-item-ct .norWidthIpt {
width: 322px;
}
.ipt {
padding: 4px 5px;
border: #ABABAB 1px solid;
box-shadow: 2px 2px 3px #EDEDED inset;
font-size: 14px;
font-weight: bold;
border-radius: 3px;
}
.ipt:hover{
border-color: #7b7b7b;
}
.regForm-item-ct .tips {
line-height: 16px;
padding: 6px 0 4px;
}
.txt-tips {
color: #999;
}
.regForm-item-ct:hover .txt-tips{
color:#333;
}
.regForm-item-ct .pswState {
width: 180px;
height: 16px;
zoom: 1;
position: absolute;
right: 90px;
top: 6px;
}
.regForm-item-ct .pswState span {
display: block;
width: 58px;
height: 16px;
line-height: 16px;
background-color: #E4E4E4;
border: #FFF 1px solid;
float: left;
margin-right: -1px;
text-align: center;
overflow: hidden;
color: #CECECE;
}
.ipt-err { /* 密码少数或多数input框添加.ipt-er这个类变成红色提示密码有错误 */
border-color: #C66161;
background-color: #FBE2E2;
color: #C00;
box-shadow: 2px 2px 3px #EDEDED inset;
}
.regForm-item-ct .tips {
line-height: 16px;
padding: 6px 0 4px;
}
.txt-err{
color: red;
}
.txt-succ{
color: #3D882D;
}
.regForm-item-ct .pswState-normal .s1 {
line-height: 200px;
}
.regForm-item-ct .pswState-poor .s1 {
/* 密码弱 span的父亲div添加.pswState-poor这个类 */
background-color: #EA9292;
border: #FFF 1px solid;
color: #FFF;
}
.regForm-item-ct .pswState-normal .s1, .regForm-item-ct .pswState-normal .s2 {
/* 密码中 span的父亲div添加.pswState-normal这个类 */
background-color: #F1D93A;
border: #FFF 1px solid;
}
.regForm-item-ct .pswState-normal .s2 {
color: #FFF;
}
.regForm-item-ct .pswState-strong .s1, .regForm-item-ct .pswState-strong .s2, .regForm-item-ct .pswState-strong .s3 {
/* 密码强 span的父亲div添加.pswState-strong这个类 */
background-color: #5AAC47;
border: #FFF 1px solid;
line-height: 200px;
}
.regForm-item-ct .pswState-strong .s3 {
line-height: 16px;
color: #FFF;
}

.regForm-item-ct .pswState span {
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-property: all;
-moz-transition-duration: 0.2s;
-o-transition-property: all;
-o-transition-duration: 0.2s;
}

jQuery：

//过滤简单密码
var arr = ["000000", "111111", "222222", "333333", "444444", "555555", "666666", "777777", "888888", "999999", "123456", "123456789", "12345678", "123123", "5201314", "1234567", "7758521", "654321", "1314520", "123321", "1234567890", "147258369", "123654", "5211314", "woaini", "1230123", "987654321", "147258", "123123123", "7758258", "520520", "789456", "456789", "159357", "112233", "1314521", "456123", "110110", "521521", "zxcvbnm", "789456123", "0123456789", "0123456", "123465", "159753", "qwertyuiop", "987654", "115415", "1234560", "123000", "123789", "100200", "963852741", "121212", "111222", "123654789", "12301230", "456456", "741852963", "asdasd", "asdfghjkl", "369258", "863786", "258369", "8718693", "666888", "5845201314", "741852", "168168", "iloveyou", "852963", "4655321", "102030", "147852369", "321321"];

//返回强度级别
function checkStrong(sPW){
if (sPW.length<6)
return 0; //密码太短，不检测级别
if (sPW.length>16)
return 4; //密码太长，不检测级别

Modes=0;
for (var i=0;i<sPW.length;i++){
//密码模式
Modes|=CharMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}

//判断输入密码的类型
function CharMode(iN){
if (iN>=48 && iN <=57) //数字
return 1;
if (iN>=65 && iN <=90) //大写
return 2;
if (iN>=97 && iN <=122) //小写
return 4;
else
return 8;
}

//bitTotal函数
//计算密码模式
function bitTotal(num){
modes=0;
for (var i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}

//页面初始化
$(function(){
//status: 0-隐藏 1-显示
hideRemind([{"key":"tips_id","status":1},{"key":"pwd_strong","status":0},{"key":"pwd_view","status":0},{"key":"tips_ts","status":0}]);
$("#user_password").keyup(function (event) {
var keycode = event.which;
if(keycode==8){
//checkStrong(this.value) : 获取密码等级 : 1-低 2-中 3-高
init_handle(checkStrong(this.value), 1,[{"key":"pwd_strong","vals":"pswState pswState-poor"},{"key":"pwd_strong","vals":"pswState pswState-normal"},{"key":"pwd_strong","vals":"pswState pswState-strong"}]);
}
});
});

/**
* @param pwd_level : 密码等级
* @param type ：事件类型 1-backspace 2-onfocus 3-onkeyup
* @param keys ：参数
*/
function init_handle(pwd_level, type, keys){
if(pwd_level == 0 && type == 3){
return;
}else if(pwd_level == 0){
hideRemind([{"key":"tips_id","status":1},{"key":"pwd_strong","status":0},{"key":"pwd_view","status":0},{"key":"tips_ts","status":0}]);
}else if(pwd_level <= 3){
$("#"+ keys[pwd_level-1].key).attr("class", keys[pwd_level-1].vals);
hideRemind([{"key":"tips_id","status":1},{"key":"pwd_strong","status":1},{"key":"pwd_view","status":0},{"key":"tips_ts","status":0}]);
}else if(pwd_level == 4 && (type == 2 || type == 3)){
hideRemind([{"key":"tips_id","status":0},{"key":"pwd_strong","status":0},{"key":"pwd_view","status":0},{"key":"tips_ts","status":1}]);
if(type == 3)
$("#txt-err").html("密码长度应为6~16个字符");
}
}

function on_blur(pwd_val){
var pwd_len = $.trim(pwd_val).length;
if(pwd_len == 0) return;

if($.inArray(pwd_val, arr) != -1){
hideRemind([{"key":"tips_id","status":0},{"key":"pwd_strong","status":0},{"key":"pwd_view","status":0},{"key":"tips_ts","status":1}]);
$("#txt-err").html("密码过于简单，请尝试“字母+数字”的组合");
return;
}
on_blur_handle(checkStrong(pwd_val),[{"key":"pwd_view","vals":"密码强度：弱"},{"key":"pwd_view","vals":"密码强度：中"},{"key":"pwd_view","vals":"密码强度：强"}]);
}

function on_blur_handle(pwd_level, keys){
if(pwd_level == 0 || pwd_level == 4){
hideRemind([{"key":"tips_id","status":0},{"key":"pwd_strong","status":0},{"key":"pwd_view","status":0},{"key":"tips_ts","status":1}]);
$("#txt-err").html("密码长度应为6~16个字符");
}else if(pwd_level <= 3){
$("#"+ keys[pwd_level-1].key).html(keys[pwd_level-1].vals);
hideRemind([{"key":"tips_id","status":0},{"key":"pwd_strong","status":0},{"key":"pwd_view","status":1},{"key":"tips_ts","status":0}]);
}
}

function on_focus(pwd_val){
init_handle(checkStrong(pwd_val), 2, [{"key":"pwd_strong","vals":"pswState pswState-poor"},{"key":"pwd_strong","vals":"pswState pswState-normal"},{"key":"pwd_strong","vals":"pswState pswState-strong"}]);
}

function on_keyup(pwd_val){
init_handle(checkStrong(pwd_val), 3, [{"key":"pwd_strong","vals":"pswState pswState-poor"},{"key":"pwd_strong","vals":"pswState pswState-normal"},{"key":"pwd_strong","vals":"pswState pswState-strong"}]);
}

hideRemind = function (keys) {
$.each(keys, function(index, val) {
if(val.status == 0)
$("#" + val.key).hide();
else
$("#" + val.key).show();
});
};