Простая и мощная валидация форм для SolidJS с Zod

Привет, Хабр!

Хочу рассказать вам про свою библиотеку solidjs-hook-form,которую я сделал для упрощения работы с множеством форм в SolidJS.

Изначально я столкнулся с такой проблемой: валидация, управление состоянием, много инпутов, boilerplate… Капец, можно запутаться. Особенно когда форма не из двух полей, а с кучей логики. Вот и пришлось мне написать свою либу.

Почему именно своя? Потому что готовых решений, заточенных под реактивность SolidJS, нормальных не было. Хотелось чего-то легкого, быстрого и без лишней магии, что использует встроенные инструменты солида для максимальной эффективности, ведь это и есть его отличительная черта. solidjs-hook-form — вот такой золотой серединки проект получился.

Чем она хороша?

Ну, во-первых, быстрая. Прямо как швейцарские часы. Использует solid-js/store под капотом, так что никаких лишних перерисовок. Только то, что действительно нужно.

Во-вторых, простая в использовании. Всё крутится вокруг одного хука useForm. Кинул туда схему валидации — и вуаля, у тебя есть всё, чтобы управлять формой.

А схемы валидации делаем с помощью Zod. Это вообще бомба. Пишешь правила — и всё. Очень удобно, особенно когда нужно проверить, например, чтобы пароли совпадали. Zod рулит.

Как это выглядит?

Смотрите. Допустим, нам нужна форма регистрации. Вот такая вот красота:

// Сначала описываем схему с помощью Zod import { z } from 'zod';  const registerSchema = z.object({   email: z.string().email({ message: "Некорректный email адрес" }),   password: z.string().min(8, { message: "Пароль должен содержать минимум 8 символов" }),   confirmPassword: z.string() }).superRefine(({ password, confirmPassword }, ctx) =&gt; {   // Проверка на совпадение паролей   if (password !== confirmPassword) {     ctx.addIssue({       code: "custom",       message: "Пароли не совпадают",       path: ["confirmPassword"]     });   } });  // Потом используем в компоненте import { useForm } from 'solidjs-hook-form';  export default function RegisterForm() {   const { form, formErrors, handleChange, validate } = useForm(registerSchema);    const handleSubmit = (e) => {     e.preventDefault();     // Валидируем форму     if (validate()) {       // Если всё ок — отправляем данные       console.log("Данные формы:", form);       // ...логика отправки на сервер     } else {       console.log("Форма содержит ошибки.");     }   };    return (     <form onSubmit={handleSubmit}>       <div>         <label for="email">Email</label>         <input          type="email"          {/*name обязательно такой же, как в zod схеме*/}         name="email"          id="email"         value={form.email}          onInput={handleChange}         >         {/* Показываем ошибку, если есть */}         {formErrors.email && <p style={{ color: 'red' }}>{formErrors.email}</p>}       </div>        <div>         <label for="password">Пароль</label>         <input           id="password"           name="password"           type="password"           value={form.password}           onInput={handleChange}         />         {formErrors.password && <p style={{ color: 'red' }}>{formErrors.password}</p>}       </div>        <div>         <label for="confirmPassword">Подтвердите пароль</label>         <input           id="confirmPassword"           name="confirmPassword"           type="password"           value={form.confirmPassword}           onInput={handleChange}         />         {formErrors.confirmPassword && <p style={{ color: 'red' }}>{formErrors.confirmPassword}</p>}       </div>        <button type="submit">Зарегистрироваться</button>     </form>   ); } 

Видите, как всё просто? useForm возвращает объект с нужными штуками:

• form — это реактивное хранилище для данных формы.

• formErrors — для ошибок.

• handleChange — обработчик, который всё обновляет сам.

• validate() — запускает проверку и возвращает true или false.

Почему не просто Zod?

Ну, Zod — это круто, но он не управляет состоянием формы в DOM. solidjs-hook-form как раз берёт эту рутину на себя. Пишешь схему, используешь хук — и всё работает. Никаких createStore, createSignal или ручных обновлений.

Как установить?

Устанавливается, как обычный npm пакет:

npm i solidjs-hook-form

В пакете сразу идут и типы, так что с Typescript все работает хорошо. Тип формы выводится из zod схемы, самому не надо ничего прописывать, что также упрощает разработку и сокращает код

Где посмотреть ещё примеры?

На странице библиотеки в npm есть больше примеров использования.

В общем

solidjs-hook-form — это не просто клон React Hook Form. Это решение, которое учитывает особенности SolidJS. Помогает сосредоточиться на логике, а не на борьбе с формами. Если работаете с SolidJS — обязательно гляньте. Может, именно это то, что вам нужно!

Ссылки

• GitHub

• NPM

• Zod