Валидация HSL

Библиотека Validator.js содержит функцию isHSL(), предназначенную для проверки строк, представляющих цвет в формате HSL.

HSL — это цветовая модель, основанная на трёх компонентах:

  • H — оттенок (Hue)
  • S — насыщенность (Saturation)
  • L — светлота (Lightness)

Формат широко используется в CSS и графических интерфейсах благодаря удобству настройки цветов.

Установка Validator.js

Через npm:

npm install validator

Подключение:

const validator = require('validator');

Для ES-модулей:

import validator from 'validator';

Метод isHSL()

Сигнатура

validator.isHSL(str)

Параметры

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

Возвращаемое значение

true | false

Базовая проверка

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

Результат:

true

Корректный синтаксис HSL

Функция ожидает строку в CSS-формате:

hsl(H, S%, L%)

Где:

Компонент Диапазон
H от 0 до 360
S от 0% до 100%
L от 0% до 100%

Примеры корректных значений

Базовые цвета

validator.isHSL('hsl(0, 100%, 50%)');
validator.isHSL('hsl(120, 100%, 50%)');
validator.isHSL('hsl(240, 100%, 50%)');

Все вызовы вернут:

true

Граничные значения

validator.isHSL('hsl(0, 0%, 0%)');
validator.isHSL('hsl(360, 100%, 100%)');

Результат:

true

Значения с пробелами

validator.isHSL('hsl(180, 50%, 50%)');
validator.isHSL('hsl(180,50%,50%)');

Обе строки валидны:

true

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

Отсутствие процентов

validator.isHSL('hsl(120, 50, 50)');

Результат:

false

Причина: насыщенность и светлота обязательно должны содержать %.

Выход за диапазон

validator.isHSL('hsl(400, 50%, 50%)');
validator.isHSL('hsl(120, 150%, 50%)');
validator.isHSL('hsl(120, 50%, 150%)');

Результат:

false

Отсутствие функции hsl()

validator.isHSL('120, 50%, 50%');

Результат:

false

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

validator.isHSL('hsl(120 50% 50%)');
validator.isHSL('hsl()');
validator.isHSL('rgb(255, 0, 0)');

Результат:

false

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

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

const color = 'hsl(200, 80%, 40%)';

if (validator.isHSL(color)) {
  console.log('Корректный HSL');
} else {
  console.log('Ошибка формата');
}

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

const colors = [
  'hsl(0, 100%, 50%)',
  'hsl(120, 50%, 50%)',
  'hsl(400, 50%, 50%)',
  'rgb(255,0,0)'
];

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

console.log(validColors);

Результат:

[
  'hsl(0, 100%, 50%)',
  'hsl(120, 50%, 50%)'
]

Использование вместе с Express

Проверка данных запроса

import express from 'express';
import validator from 'validator';

const app = express();

app.use(express.json());

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

  if (!validator.isHSL(accentColor)) {
    return res.status(400).json({
      error: 'Некорректный HSL-цвет'
    });
  }

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

Проверка CSS-настроек

const theme = {
  primary: 'hsl(210, 80%, 50%)',
  secondary: 'hsl(340, 70%, 45%)',
  danger: 'hsl(0, 100%, 50%)'
};

for (const color of Object.values(theme)) {
  if (!validator.isHSL(color)) {
    throw new Error(`Некорректный цвет: ${color}`);
  }
}

Особенности isHSL()

Проверяется только строковый формат

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

  • наличие hsl(...)
  • диапазоны значений
  • проценты
  • синтаксис CSS

Функция не преобразует цвет и не вычисляет его визуальное представление.

Строка должна быть полностью корректной

Даже небольшое отклонение приводит к ошибке:

validator.isHSL(' hsl(120, 50%, 50%) ');

Результат может быть:

false

Из-за лишних пробелов по краям строки.

Очистка строки перед проверкой

Практически всегда рекомендуется использовать trim():

const color = input.trim();

validator.isHSL(color);

Совмещение с другими цветовыми валидаторами

В библиотеке присутствуют и другие методы проверки цветов:

Метод Формат
isHexColor() HEX
isRGBColor() RGB
isHSL() HSL

Универсальная проверка CSS-цветов

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

Проверка динамических тем интерфейса

function applyThemeColor(color) {
  if (!validator.isHSL(color)) {
    throw new Error('Недопустимый цвет');
  }

  document.documentElement.style.setProperty(
    '--accent-color',
    color
  );
}

Валидация конфигурационных файлов

const config = {
  background: 'hsl(220, 20%, 15%)',
  text: 'hsl(0, 0%, 95%)'
};

Object.entries(config).forEach(([key, value]) => {
  if (!validator.isHSL(value)) {
    console.error(`Ошибка в поле ${key}`);
  }
});

Сравнение корректных и некорректных строк

Строка Результат
hsl(120, 50%, 50%) true
hsl(360, 100%, 100%) true
hsl(400, 50%, 50%) false
hsl(120, 150%, 50%) false
hsl(120, 50, 50) false
rgb(255,0,0) false
#ff0000 false

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

Использование чисел вместо строк

validator.isHSL(12345);

Результат:

false

Отсутствие процентов

validator.isHSL('hsl(100, 50, 50)');

Ошибка связана с неверным CSS-синтаксисом.

Неправильный диапазон hue

validator.isHSL('hsl(-10, 50%, 50%)');

Результат:

false

Практический пример: настройка темы

function saveTheme(settings) {
  const { primaryColor } = settings;

  if (!validator.isHSL(primaryColor)) {
    return {
      success: false,
      error: 'Некорректный цвет темы'
    };
  }

  return {
    success: true
  };
}

Практический пример: проверка JSON

const palette = [
  'hsl(10, 80%, 50%)',
  'hsl(40, 90%, 60%)',
  'hsl(500, 20%, 20%)'
];

const errors = [];

palette.forEach(color => {
  if (!validator.isHSL(color)) {
    errors.push(color);
  }
});

console.log(errors);

Результат:

[
  'hsl(500, 20%, 20%)'
]

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

isHSL() использует регулярные выражения и строковый анализ. Проверка выполняется быстро и подходит для:

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

Рекомендации

Нормализация данных

const normalized = color.trim().toLowerCase();

Централизованная функция проверки

function validateHSL(color) {
  return validator.isHSL(
    color.trim()
  );
}

Комбинирование с пользовательскими правилами

function validateThemeColor(color) {
  if (!validator.isHSL(color)) {
    return false;
  }

  return !color.includes('0%, 0%');
}

Проверка перед сохранением в базу данных

async function saveColor(color) {
  if (!validator.isHSL(color)) {
    throw new Error('Некорректный формат');
  }

  await db.colors.insert({
    value: color
  });
}

Использование в React

import validator from 'validator';
import { useState } from 'react';

function ColorInput() {
  const [color, setColor] = useState('');
  const [error, setError] = useState('');

  function handleChange(e) {
    const value = e.target.value;

    setColor(value);

    if (!validator.isHSL(value)) {
      setError('Некорректный HSL');
    } else {
      setError('');
    }
  }

  return (
    <div>
      <input
        value={color}
        onCha nge={handleChange}
      />

      {error && <p>{error}</p>}
    </div>
  );
}
Оглавление