Методы isHexColor и isRgbColor

Библиотека Validator.js содержит набор методов для проверки строковых значений. Для работы с CSS-цветами используются методы isHexColor() и isRgbColor(). Они позволяют валидировать пользовательский ввод, параметры темизации, данные из форм и конфигурационные значения интерфейса.

Метод isHexColor

Назначение

Метод isHexColor() проверяет, является ли строка корректным HEX-цветом.

Поддерживаются стандартные CSS-форматы:

#fff
#ffffff
#abcd
#aabbccdd

Метод возвращает:

  • true — строка является HEX-цветом;
  • false — строка не соответствует формату.

Подключение библиотеки

Установка

npm install validator

Импорт

CommonJS

const validator = require('validator');

ES Modules

import validator from 'validator';

Синтаксис isHexColor

validator.isHexColor(str)

Параметры

Параметр Тип Описание
str string Проверяемая строка

Простейший пример

import validator from 'validator';

console.log(validator.isHexColor('#ff0000'));

Результат:

true

Поддерживаемые форматы HEX

Короткий RGB

validator.isHexColor('#fff');
true

Полный RGB

validator.isHexColor('#ffffff');
true

Короткий RGBA

validator.isHexColor('#ffff');
true

Полный RGBA

validator.isHexColor('#ffffffff');
true

Неподдерживаемые значения

Отсутствие символа

validator.isHexColor('ffffff');
false

Недопустимые символы

validator.isHexColor('#gggggg');
false

Неверная длина

validator.isHexColor('#ff');
false

Пустая строка

validator.isHexColor('');
false

Как работает проверка

Метод анализирует:

  1. наличие символа # в начале строки;
  2. длину значения;
  3. допустимость шестнадцатеричных символов.

Допустимые символы:

0-9
a-f
A-F

Проверка пользовательского ввода

Валидация поля формы

function validateColor(color) {
    if (!validator.isHexColor(color)) {
        return 'Некорректный HEX-цвет';
    }

    return 'OK';
}

console.log(validateColor('#12abef'));

Использование в Express.js

app.post('/theme', (req, res) => {
    const { primaryColor } = req.body;

    if (!validator.isHexColor(primaryColor)) {
        return res.status(400).json({
            error: 'Invalid color'
        });
    }

    res.json({
        success: true
    });
});

Проверка массива цветов

const colors = [
    '#ff0000',
    '#00ff00',
    '#invalid',
    '#123456'
];

const validColors = colors.filter(color =>
    validator.isHexColor(color)
);

console.log(validColors);

Результат:

[ '#ff0000', '#00ff00', '#123456' ]

Нормализация перед проверкой

Пользовательские данные часто содержат лишние пробелы.

Ошибочный вариант

validator.isHexColor('  #ffffff  ');
false

Правильный вариант

validator.isHexColor('  #ffffff  '.trim());
true

Проверка динамических CSS-настроек

function setThemeColor(color) {
    if (!validator.isHexColor(color)) {
        throw new Error('Invalid HEX color');
    }

    document.body.style.backgroundColor = color;
}

Ограничения метода

Метод не проверяет:

  • существование CSS-переменных;
  • именованные цвета (red, blue);
  • HSL-форматы;
  • RGB-строки;
  • семантику цвета.

Пример:

validator.isHexColor('red');
false

Метод isRgbColor

Назначение

Метод isRgbColor() проверяет корректность RGB- и RGBA-цветов.

Поддерживаются форматы:

rgb(255, 0, 0)
rgba(255, 0, 0, 0.5)

Синтаксис

validator.isRgbColor(str[, options])

Параметры

Параметр Тип Описание
str string Проверяемое значение
options object Дополнительные настройки

Базовый пример

validator.isRgbColor('rgb(255, 0, 0)');
true

Проверка RGBA

validator.isRgbColor('rgba(255, 0, 0, 0.5)');
true

Форматы, которые проходят проверку

RGB

validator.isRgbColor('rgb(0,0,0)');
true

RGBA

validator.isRgbColor('rgba(255,255,255,1)');
true

Прозрачность с дробным числом

validator.isRgbColor('rgba(10, 20, 30, 0.25)');
true

Некорректные значения

Значения больше 255

validator.isRgbColor('rgb(300, 0, 0)');
false

Отрицательные значения

validator.isRgbColor('rgb(-1, 0, 0)');
false

Неверный синтаксис

validator.isRgbColor('rgb(255)');
false

Ошибка в альфа-канале

validator.isRgbColor('rgba(255,0,0,2)');
false

Диапазоны допустимых значений

RGB-компоненты

Допустимый диапазон:

0–255

Alpha-канал

Допустимый диапазон:

0–1

Примеры:

rgba(255,0,0,0)
rgba(255,0,0,1)
rgba(255,0,0,0.75)

Опции isRgbColor

allow_percent_values

Разрешает процентные значения.

Проверка RGB-процентов

Без опции

validator.isRgbColor('rgb(50%, 50%, 50%)');
false

С включённой опцией

validator.isRgbColor(
    'rgb(50%, 50%, 50%)',
    { allow_percent_values: true }
);
true

Проверка RGBA с процентами

validator.isRgbColor(
    'rgba(100%, 0%, 50%, 0.5)',
    { allow_percent_values: true }
);
true

Практический пример

Проверка CSS-значений

function isValidCssColor(color) {
    return (
        validator.isHexColor(color) ||
        validator.isRgbColor(color)
    );
}

console.log(isValidCssColor('#ff0000'));
console.log(isValidCssColor('rgb(255,0,0)'));
console.log(isValidCssColor('blue'));

Результат:

true
true
false

Валидация темы приложения

const theme = {
    primary: '#1e90ff',
    secondary: 'rgb(255, 255, 255)'
};

function validateTheme(theme) {
    const values = Object.values(theme);

    return values.every(color =>
        validator.isHexColor(color) ||
        validator.isRgbColor(color)
    );
}

console.log(validateTheme(theme));

Проверка CSS-конфигураций

const styles = [
    'rgb(255,0,0)',
    '#00ff00',
    'rgba(0,0,0,0.5)',
    'hsl(120, 100%, 50%)'
];

const valid = styles.filter(style =>
    validator.isHexColor(style) ||
    validator.isRgbColor(style)
);

console.log(valid);

Типичные ошибки

Попытка проверить HSL через isRgbColor

validator.isRgbColor('hsl(120, 100%, 50%)');
false

Проверка без trim()

validator.isRgbColor(' rgb(255,0,0) ');
false

Исправленный вариант

validator.isRgbColor(' rgb(255,0,0) '.trim());
true

Комбинирование с другими методами Validator.js

function validateInput(value) {
    return (
        validator.isHexColor(value) ||
        validator.isRgbColor(value) ||
        validator.isHSL(value)
    );
}

Сравнение isHexColor и isRgbColor

Метод Поддерживаемые форматы
isHexColor() #fff, #ffffff, #ffffffff
isRgbColor() rgb(), rgba()

Проверка CSS-палитры

const palette = {
    success: '#28a745',
    warning: 'rgb(255,193,7)',
    danger: 'rgba(220,53,69,0.8)'
};

for (const [name, color] of Object.entries(palette)) {
    const isValid =
        validator.isHexColor(color) ||
        validator.isRgbColor(color);

    console.log(name, isValid);
}

Производительность

Методы работают быстро, поскольку используют регулярные выражения и простую проверку диапазонов.

Подходят для:

  • проверки форм;
  • API-валидации;
  • CSS-конфигураций;
  • редакторов тем;
  • UI-конструкторов;
  • систем динамической стилизации.

Рекомендации по использованию

Выполнять очистку строки

value.trim()

Проверять формат до сохранения

if (!validator.isHexColor(color)) {
    throw new Error('Invalid color');
}

Использовать комбинированную валидацию

const isColor =
    validator.isHexColor(value) ||
    validator.isRgbColor(value);

Не заменять валидацией CSS-парсер

Методы проверяют только корректность строки, но не анализируют:

  • совместимость браузеров;
  • каскадирование;
  • CSS-переменные;
  • вычисляемые значения;
  • контекст применения цвета.
Оглавление