Для достижения нашей цели есть много jQuery плагинов, но мы будем использовать pwdMeter. pwdMeter - один из самых простых в применении плагинов jQuery для проверки надежности пароля.

И так предположим у вас есть форма регистрации или смены пароля в которой мы и будем вводить пароль и проверять его надежность.

1 Шаг. Подключаем jQuery и pwdMeter: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pwdMeter.js"></script>

2. Шаг. Привязываем pwdMeter к полю с вводом пароля: 

<script type="text/javascript">
    $(document).ready(function(){
        $("#password").pwdMeter();
    });
</script>

3. Шаг. Добавим к полю ввода пароля блок, в котором будем выводить степень надежности пароля: 

<div id="grid">
  <input type="password" id="password">
  <span id="pwdMeter" class="neutral"></span>
</div>

4 Шаг. Добавим CSS стили для цветового обозначения надежности пароля: 

<style>
    .veryweak{
        color:#B40404;
    }
    .weak{
        color:#DF7401;
    }
    .medium{
        color:#FFFF00;
    }
    .strong{
        color:#9AFE2E;
    }
    .verystrong{
        color:#0B610B;
    }
</style>

Готово, вот полный код страницы. CSS и JS мы вынесли в отдельные файлы: 

<!DOCTYPE html>
<html>
    <head>
        <title>Проверка надежности пароля с помощью jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.pwdMeter.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#password").pwdMeter();
            });
        </script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="content">
            <input type="password" id="password">
            <span id="pwdMeter" class="neutral"></span>
        </div>
    </body>
</html>