JSFiddle - React, Tailwind, and code Playground

by kadymov

HTML

<div class="wrapper">
    <input type="text" id="inp" />
    <div class="barBord">
        <div id="bar"></div>
    </div>
    <div id="mes">Сообщение об ошибке</div>
</div>

CSS

body {
    font: 12px/12px Helvetica, Arial, sans-serif;
}
.wrapper {
    width: 200px;
}
#inp {
    width: 196px;
    outline: none;
}
.barBord {
    margin-top: 3px;
    height: 5px;
    border: 1px solid black;
    background: #aaa;
    background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 50%, #2fdb00 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), 
        color-stop(50%, #ffff00), color-stop(100%, #2fdb00));
    background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 50%, #2fdb00 100%);
    background: -o-linear-gradient(left, #ff0000 0%, #ffff00 50%, #2fdb00 100%);
    background: -ms-linear-gradient(left, #ff0000 0%, #ffff00 50%, #2fdb00 100%);
    background: linear-gradient(to right, #ff0000 0%, #ffff00 50%, #2fdb00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', 
        endColorstr='#2fdb00', GradientType=1);
}

#bar {
    background: #fff;
    height: 100%;
    float: right;
    width: 100%;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
#mes {
    margin-top: 5px;
    padding: 5px;
    background: #eee;
    border: 1px solid #ccc;
    color: #888;
}
#mes.error {
    background: #fee;
    border: 1px solid #fcc;
    color: #e99;
}

JavaScript

(function (window, undefined) {
    'use strict'; // Включаем строгий режим

    var VERSION = '1.0';

    /*                  Private section
     ***************************************************/
    // Параметры по умолчанию
    var settings = {
        minLength       : 8,
        maxLength       : 32,
        alphaDigit      : true,
        diffCase        : false,

        lengthError     : 'The password is too short or too long',
        alphaDigitError : 'The password must contain at least one numeric character and at least one letter',
        diffCaseError   : 'The password must contain both uppercase and lowercase characters'
    };

    /**
     * Функция проверки типа объекта 
     *
     * @param {Object} obj Проверяемый объект
     * @param {String} type Предпологаемый тип объекта
     * @return {Boolean} Результат сравнения
     */
    function is(obj, type) {
        var clas = Object.prototype.toString.call(obj).slice(8, -1);
        return obj !== undefined && 
               obj !== null && 
               clas.toLowerCase() === type.toLowerCase();
    }

    /**
     * Оценочная функция
     *
     * @param {String} pass Проверяемый пароль
     * @return {Number} Результат оценки пароля в промежутке от 0 до 1
     */
    function estimatePass(pass) {
        var // Минимальная длинна
            GOOD_LEN = 12,
            // Проверка на наличие прописных, строчных букв, цифр и символов
            loCase  = pass.search(/[a-z]/) !== -1,
            hiCase  = pass.search(/[A-Z]/) !== -1,
            num     = pass.search(/\d/) !== -1,       
            sym     = pass.search(/[!@#\$%&\*\(\)_\-=\+"'#\^№;:\?,\.\\\|\/`~{}\[\]]/) !== -1,

            // Длинна пароля, составляет 1/4 максимальной оценки
            pLen = pass.length < GOOD_LEN ? pass.length / GOOD_LEN / 4 : 1/4;

        // Оценка сложности пароля: от 0 до 1
        return pLen * (loCase + hiCase + num + sym);
    }

    /*                  Public section
    ...