当前位置：模板网首页 > 特效插件 > 表单按钮 >  智能判断密码框密码正文

特效介绍

智能判断密码框密码强度的jQuery特效，输入前，会提示“6-16位，由字母（区分大小写）、数字、符号组成”并呈现灰显，输入框获取焦点会变成红色。输入框下面有判断强度的三个色条，也呈现灰显。当输入1个字符时，色条的第一个会呈现红色，表示非常弱，输入到6个字符时，后面提示文字消失。随着输入字符的复杂化，第二个色条会显示，表示密码强度中等，到输入非常复杂时，第三个色条会显示，表示非常强。当输入超过16个字符时，你会发现，再输入也输不进去了。

使用方法

1、在head区域引入jQuery库和css文件：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="Css/style.css" rel="stylesheet" type="text/css" />

2、在body区域引入下面的代码：

<form name="form1" method="post" action="register.aspx" id="form1">
  <div id="pnBefore" class="t_zc_tc_a_tizhuce_a">
    <div class="t_zc_tc_a_tizhuce_bg">
      <div class="ywz_zhuce_bao" style="height: 580px; padding: 40px 0 0 0 !important;
                border-right: none !important; margin-bottom: 0px;">
        <div class="t_ywz_fuzai_yi"></div>
        <div class="t_ywz_fuzai_yi"></div>
        <div class="ywz_zhucexiaobo">
          <div class="ywz_zhuce_youjian"> 设置密码：</div>
          <div class="ywz_zhuce_xiaoxiaobao">
            <div class="ywz_zhuce_kuangzi">
              <input name="tbPassword" type="password" id="tbPassword" class="ywz_zhuce_kuangwenzi1" />
            </div>
            <div class="ywz_zhuce_huixian" id='pwdLevel_1'> </div>
            <div class="ywz_zhuce_huixian" id='pwdLevel_2'> </div>
            <div class="ywz_zhuce_huixian" id='pwdLevel_3'> </div>
            <div class="ywz_zhuce_hongxianwenzi"> 弱</div>
            <div class="ywz_zhuce_hongxianwenzi"> 中</div>
            <div class="ywz_zhuce_hongxianwenzi"> 强</div>
          </div>
          <div class="ywz_zhuce_yongyu1"> <span id="pwd_tip" style="color: #898989"><font style="color: #F00">*</font> 6-16位，由字母（区分大小写）、数字、符号组成</span> <span id="pwd_err" style="color: #f00; display:none;">6-16位，由字母（区分大小写）、数字、符号组成</span> </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script type="text/javascript">
        $('#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;
        }
    </script>
</form>

智能判断密码框密码强度的jQuery特效效果预览 智能判断密码框密码强度的jQuery特效本地下载