jQuery实现密码强度检测

jQuery普遍运用于JAVA_WEB前端，可以说jQuery的运用无处不在，学好jQuery，对于一个程序员来说是必由之路。下面简单介绍一下jQuery实现密码强度检测。

如图所示：

核心代码：

第一步：css样式：

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
input::-ms-clear{display:none;}
/** 设置默认字体 **/
body,button, input, select, textarea {
   font-family:微软雅黑, Verdana, Geneva, sans-ser;
   font-size:14px;
   color:#666;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol, li { list-style: none outside;  display:block;  overflow:hidden; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/



/**************会员注册 start*********************/
.ywz_zhuce_wenzi{float:left; 1000px; text-align:left; height:30px;line-height:30px; font-weight:bold; font-size:16px; color:#333;  }
.ywz_zhuce_zou1{ float:left; 1000px; height:690px; border:1px #dcdcdc solid;}
.ywz_zhuce_huanying{ float:left; 600px; margin-left:61px; margin-top:36px; font-size:16px;  font-weight:bold;color:#797979;}
.ywz_zhuce_bao{ float:left; 640px; height:360px; padding: 30px 0px 0px 66px; border-right:1px dashed #e5e5e5;} 
.ywz_zhucexiaobo{ float:left; 620px; padding-bottom:10px;padding-top:5px; margin-left:20px;}
.ywz_zhuce_youjian{ float:left; 100px; margin: 5px 0 0 0; font-size:14px;  text-align:right; }/*用户*/
.ywz_hong{ color:#ff4e00; font-size:12px; font-family:"宋体";}/*加红*/
.ywz_zhuce_kuangzi{ float:left; 226px; height:38px; color:#171717;}
.ywz_zhuce_kuangwenzi2{float:left;   color:#3e3e3e; 210px; height:36px; border: 1px solid #C4C4C4; padding:0 15px 0 15px; line-height:35px; _padding-left:20px;outline:medium;}
.ywz_zhuce_kuangwenzib{float:left; border: 1px solid #C4C4C4;  color:#3e3e3e; 210px; height:36px; padding: 0 15px 0 15px; line-height:35px; _padding-left:20px;outline:medium;}
.ywz_zhuce_input{float:left; color:#3e3e3e; 126px; height:36px; border:0; padding-left:25px; line-height:35px; _padding-left:20px;outline:medium; border-left: 1px solid #c4c4c4; border-top: 1px solid #c4c4c4;border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; line-height:36px; color:#b6b6b6;}

.ywz_zhuce_yuo{ float:right; 240px; margin-top:60px;}
.ywz_zhuce_yongkuang1{ font-size:16px;  font-weight:bold; color:#010101; clear:both; text-align:left; text-indent:22px;}
.ywz_zhuce_hongkuang{ float:left; margin-top:15px; background:#fe7213;}
.ywz_zhuce_hongkuang a{ float:left; font-size:14px; background: #A2A2A2; 137px; height:34px; font-weight:bold; color:#FFF; line-height:34px;}
.ywz_zhuce_hongkuang a:hover{ float:left;  background: #C00; 137px; height:34px; color:#FFF; }
.ywz_zhuce_denglusanjiao{ float:left; margin-top:12px; margin-left:35px; color:#fff;}
.ywz_zhuce_muqian{ float:left; 205px; margin-top:30px; font-size:12px;  color:#666; text-align:left;}
.ywz_zhuce_hongzi{ color:#ff6701;}

.ywz_zhuce_kuangwenzi3{  float:left; background: url(../images/zhuce_kuang_03.jpg) no-repeat; border:0; color:#3e3e3e; 222px; height:30px; padding-left:2px; padding-top:12px;}
.ywz_tc_dl{ float:left; background:url(../images/denglu-yaoshi_03.jpg) no-repeat; 20px; height:30px;}
.ywz_zhuce_yongyu{ float:left; color:#468e9d; font-size:12px;  padding-left:15px; margin-top:10px;  _padding-left:5px; }/*后面的文字*/
.ywz_zhuce_yongyu a{  color:#468e9d; }
.ywz_zhuce_yongyu a:hover{  color:#468e9d; text-decoration:underline;}
.ywz_zhuce_yongyu1{ float:left; color: #C00 ; font-size:12px;  padding-left:10px; margin-top:10px;  _padding-left:0px; }/*后面的文字*/
.ywz_zhuce_yongyu1 a{  color:#C00; text-decoration:none; }
.ywz_zhuce_yongyu1 a:hover{  color:#C00; }
.ywz_zhuce_xiaoxiaobao{ float:left; 226px; }
.ywz_zhuce_hongxian{ float:left; background:#ff3300; 62px; height:4px; margin-top:5px; margin-left:5px; _margin-top:0px;_height:2px; font-size:0px;}
.ywz_zhuce_hongxian2{ float:left; background: #099; 62px; height:4px; margin-top:5px; margin-left:5px; _margin-top:0px;_height:2px; font-size:0px;}
.ywz_zhuce_hongxian3{ float:left; background: #060; 62px; height:4px; margin-top:5px; margin-left:5px; _margin-top:0px;_height:2px; font-size:0px;}
.ywz_zhuce_huixian{ float:left; background:#d6d3d3; 62px; height:4px; margin-top:5px; _margin-top:0px; margin-left:5px; _height:2px;font-size:0px;}
.ywz_zhuce_hongxianwenzi{ float:left; 62px; margin-left:5px; text-align:center; color:#b0adad; font-size:12px; }
.ywz_zhuce_tongyi{ float: right; 530px; margin-bottom:10px; }/*同意内面*/
.ywz_zhuce_dui{ float:left; 10px; height:10px;}
.ywz_zhuce_tongyiwenzi{ float:left; font-size:12px;  color:#555; padding-bottom:10px;}/*同意*/
.ywz_zhuce_lanseai{ color:#1190ae;}
.ywz_jhbg1{ background: url(../images/DENGSE_03.jpg) no-repeat center top; 7px; height:12px; _padding-top:5px; _height:2px; _font-size:0px; *height:16px; display: inline-block; }
.ywz_zhuce_bgkuang{float:right; 520px; text-align:center;}
.ywz_zhuce_tijiao{ float:left; background:#e6343c; 200px; height:40px; }
.ywz_zhuce_tijiao a{ float:left; background: #e6343c; 2020px; height:40px; color:#FFF; font-size:16px; line-height:40px; }
.ywz_zhuce_tijiao a:hover{ float:left; background:#d52028; 200px; height:40px; }
.ywz_zhuce_zhujiwenzi{ float:left; font-size:18px; font-weight:bold; color:#fff; padding-left:55px; padding-top:15px;}


.register_hy2{ margin-top: 6px; float:left; height:30px; line-height:30px !important; font-family:微软雅黑,Verdana, Geneva, sans-serif;}

/*弹窗注册*/
.reg_succes1 a{ color:#FFF; line-height:26px;}
    
/*人头*/
.ywz_zhuce_kuangwenzi{ float:left; background: url(../images/deng1.jpg) no-repeat; border:0; color:#3e3e3e; 221px; height:40px; line-height:35px; padding-left:25px;   _padding-left:20px; outline:medium; }

/*邮箱*/
.ywz_zhuce_kuangwenzi0{ float:left; background: url(../images/zhuce_kuang_03.jpg) no-repeat; border:0; color:#3e3e3e; 220px; height:35px; line-height:35px; padding-left:5px;  _padding-left:7px;outline:medium;}

/*钥匙*/
.ywz_zhuce_kuangwenzi1{ float:left; background: url(../images/dengl_06.jpg) no-repeat; border:0; color:#3e3e3e; 210px; height:40px;  line-height:35px; padding-left:25px;  _padding-left:20px;outline:medium;}/*框*/
.ywz_zhuce_denglu{ float:left; color:#468e9d; font-size:12px; padding-top:10px; padding-left:15px; _padding-left:0px;}
.ywz_zhuce_denglu a{ color:#468e9d; }
.ywz_zhuce_denglu a:hover{ color:#468e9d; text-decoration: underline;}
.ywz_zhuce_denglulo{ float:left; 110px; color:#949494; margin-top:15px; font-size:12px; }
.ywz_zhuce_denglu1{ color:#468e9d; font-size:12px; }
.ywz_zhuce_denglu1 a{ color:#468e9d; }
.ywz_zhuce_denglu1 a:hover{ color:#468e9d; text-decoration: underline;}
.ywz_zhuce_denglukuang{ float:left; 500px; margin-top:0px;height:40px; text-align:center;}
.dcdl{500px; background:#e6343c; 182px; height:40px; line-height:40px;text-align:center; color:#fff; font-size:16px; font-weight:bold; border:none;}
.dcdl:hover{ background:#c1171f;}
.ywz_zhuce_kuangzilu{ float:left; 105px;}
.ywz_zhuce_kuangzidenglu{ float:left; background: url(../images/dengloo_03.jpg) no-repeat; border:0px; color:#3e3e3e; 120px; height:37px; line-height:30px; padding-left:5px;outline:medium;}/*验证码*/
.ywz_denglu_yanzheng{ float:left; margin-left:15px; padding-left:8px; _margin-left:1px; _padding-left:2px; }
.ywz_zhuce_dengbao{ float:left; 640px; height:280px; padding: 30px 0px 0px 66px; border-right:1px dashed #e5e5e5;} 

第二步：导入图片images

第三步：导入js标签库（同时导入JQuery.min）

      $('#tbPassword').focus(function () {
            $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
            $('#tbPassword').keyup();
        });
        $('#tbPassword').keyup(function () {
            var __th = $(this);

            if (!__th.val()) {
                $('#pwd_tip').hide();
                $('#pwd_err').show();
                Primary();
                return;
            }
            if (__th.val().length < 6) {
                $('#pwd_tip').hide();
                $('#pwd_err').show();
                Weak();
                return;
            }
            var _r = checkPassword(__th);
            if (_r < 1) {
                $('#pwd_tip').hide();
                $('#pwd_err').show();
                Primary();
                return;
            }

            if (_r > 0 && _r < 2) {
                Weak();
            } else if (_r >= 2 && _r < 4) {
                Medium();
            } else if (_r >= 4) {
                Tough();
            }

            $('#pwd_tip').hide();
            $('#pwd_err').hide();
        });

     

        function Primary() {
            $('#pwdLevel_1').attr('class', 'ywz_zhuce_huixian');
            $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
            $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
        }

        function Weak() {
            $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
            $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
            $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
        }

        function Medium() {
            $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
            $('#pwdLevel_2').attr('class', 'ywz_zhuce_hongxian2');
            $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
        }

        function Tough() {
            $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
            $('#pwdLevel_2').attr('class', 'ywz_zhuce_hongxian2');
            $('#pwdLevel_3').attr('class', 'ywz_zhuce_hongxian3');
        }




        function checkPassword(pwdinput) {
            var maths, smalls, bigs, corps, cat, num;
            var str = $(pwdinput).val()
            var len = str.length;

            var cat = /.{16}/g
            if (len == 0) return 1;
            if (len > 16) { $(pwdinput).val(str.match(cat)[0]); }
            cat = /.*[u4e00-u9fa5]+.*$/
            if (cat.test(str)) {
                return -1;
            }
            cat = /d/;
            var maths = cat.test(str);
            cat = /[a-z]/;
            var smalls = cat.test(str);
            cat = /[A-Z]/;
            var bigs = cat.test(str);
            var corps = corpses(pwdinput);
            var num = maths + smalls + bigs + corps;

            if (len < 6) { return 1; }

            if (len >= 6 && len <= 8) {
                if (num == 1) return 1;
                if (num == 2 || num == 3) return 2;
                if (num == 4) return 3;
            }

            if (len > 8 && len <= 11) {
                if (num == 1) return 2;
                if (num == 2) return 3;
                if (num == 3) return 4;
                if (num == 4) return 5;
            }

            if (len > 11) {
                if (num == 1) return 3;
                if (num == 2) return 4;
                if (num > 2) return 5;
            }
        }

        function corpses(pwdinput) {
            var cat = /./g
            var str = $(pwdinput).val();
            var sz = str.match(cat)
            for (var i = 0; i < sz.length; i++) {
                cat = /d/;
                maths_01 = cat.test(sz[i]);
                cat = /[a-z]/;
                smalls_01 = cat.test(sz[i]);
                cat = /[A-Z]/;
                bigs_01 = cat.test(sz[i]);
                if (!maths_01 && !smalls_01 && !bigs_01) { return true; }
            }
            return false;
 }