Проверка стала проще с Zod: как обеспечить точность и качество форм

[Jspi]

Проверка данных является важной частью любого веб-приложения. Это гарантирует, что данные, предоставленные пользователем, точны и действительны перед отправкой на сервер. Однако проверка данных может оказаться утомительной и трудоемкой задачей, особенно когда речь идет о сложных формах.

Но что, если я скажу вам, что есть способ сделать эту задачу проще и эффективнее? Библиотека Zod — идеальное решение этой проблемы. Он обеспечивает простой и лаконичный синтаксис для определения правил проверки и позволяет легко обнаруживать ошибки входных данных.

В сочетании с Vue.js Zod становится еще более мощным. В этой статье мы покажем вам, как использовать Zod для создания точной и подробной схемы проверки адреса и как применить ее в компоненте Vue.js с использованием композиции Vue 3. Кроме того, мы увидим, как использовать регулярные выражения для проверки почтового индекса и v-маску для применения масок

Для начала мы установим Zod в наш проект Vue.js:

npm install zod

import { object, string, number } from 'zod';

const addressSchema = object({
  street: string().min(3).max(50).required(),
  number: number().required(),
  city: string().min(3).max(50).required(),
  state: string().min(2).max(2).required(),
  zip: string().pattern(/^\d{5}-\d{3}$/).required()
});

С помощью этой схемы мы определяем, что улица должна представлять собой строку, содержащую не менее 3 и не более 50 символов, и является обязательной. Число должно быть числом и является обязательным. Город должен представлять собой строку, содержащую не менее 3 и не более 50 символов. Это обязательное поле. Состояние должно представлять собой строку, содержащую не менее 2 и не более 2 символов, и является обязательным. Почтовый индекс должен представлять собой строку в формате «12345-678» (с учетом почтового индекса Бразилии) и является обязательным.

Теперь мы создадим наш компонент Vue.js, используя композицию:

<template>
  <form>
    <label for="street">Street:</label>
    <input id="street" v-model="address.street" type="text" />
    <br />
    <label for="number">Number:</label>
    <input id="number" v-model="address.number" type="number" />
    <br />
    <label for="city">City:</label>
    <input id="city" v-model="address.city" type="text" />
    <br />
    <label for="state">State:</label>
    <input id="state" v-model="address.state" type="text" minlength="2" maxlength="2" />
    <br />
    <label for="zip">Zip:</label>
    <input id="zip" v-model="address.zip" v-mask="'#####-###'" type="text"  placeholder="Zip Code" />
    <br />
    <button @click.prevent="submitForm">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { object, string, number } from 'zod'

// Ideally, put this code in a schema file
const addressSchema = object({
  street: string().min(3).max(50).required(),
  number: number().required(),
  city: string().min(3).max(50).required(),
  state: string().min(2).max(2).required(),
  zip: string().pattern(/^\d{5}-\d{3}$/).required()
})

const address = ref({
  street: '',
  number: 0,
  city: '',
  state: '',
  zip: ''
})

const submitForm = async () => {
  try {
    const valid = addressSchema.validate(address.value)

    if (!valid) return

    // Send data to server
  } catch (err) {
    console.log(err.errors)
  }
}
</script>

Здесь мы создали простую форму с полями адреса и добавили v-модель к каждому полю, чтобы привязать их к свойствам объекта адреса. Мы также добавили v-маску для применения маски к почтовому индексу. Когда пользователь нажимает кнопку «Отправить», форма отправляется, и схема проверки Zod используется для проверки данных. Если данные действительны, они отправляются на сервер. В противном случае ошибки проверки отображаются в консоли.

Подводя итог, Zod — потрясающий инструмент для проверки данных при использовании в сочетании с Vue.js. Это позволяет создавать точные и простые в использовании схемы проверки, гарантирующие достоверность входных данных. С Zod можно обеспечить качество входных данных в вашем приложении Vue.js и избежать ошибок.

[admin]

Интересно было бы дополнить статью, добавив показ ошибок в шаблоне, под полями

[kirilljs]

Vue говно, смысл на нем писать если все бигтехи пишут на Реакт?

[Jspi]

@kirilljs Озон Пишет на вью, у Тинькофф банка проекты на ангуляре

[kirilljs]

@Fox

class Fox extends ManLover {
  constructor({ 4len }) {
    this.ass = 4len
  }
}

[Mugiwara]

@kirilljs че это?

[DeepSeeker]

Тема замены классического class-validator на Zod в NestJS зацепила — сам недавно экспериментировал с этим связкой. Делюсь мыслями и болью:

Zod vs class-validator: где границы стираются

• class-validator — это как старый друг: знакомый, предсказуемый, но иногда требует танцев с декораторами:

    
    class CreateUserDto {  
      @IsString()  
      @Length(3, 20)  
      name: string;  
    }  

• Zod же — это валидация через схему, где типы и проверки рождаются в одном месте. Плюс автовывод TypeScript:

    
    const CreateUserSchema = z.object({  
      name: z.string().min(3).max(20).transform(val => val.trim()),  
    });  
    type CreateUserDto = z.infer<typeof CreateUserSchema>;  
    
    Никаких двойных объявлений — схема диктует тип.

Интеграция с NestJS: кастомный ValidationPipe

Заменить стандартный pipe на Zod-версию можно так:

import { PipeTransform, Injectable } from '@nestjs/common';  
import { ZodSchema } from 'zod';  

@Injectable()  
export class ZodValidationPipe implements PipeTransform {  
  constructor(private schema: ZodSchema) {}  

  transform(value: unknown) {  
    return this.schema.parse(value); // Выбросит исключение при ошибке 
  }  
}  

// В контроллере: 
@Post()  
@UsePipes(new ZodValidationPipe(CreateUserSchema))  
createUser(@Body() dto: CreateUserDto) { /* ... */ }  

Или использовать готовые обёртки вроде nestjs-zod, если лень писать велосипеды.

Кастомные ошибки: от слов к делу

Zod позволяет кастомизировать сообщения глобально или для конкретного поля:

const schema = z.object({  
  email: z.string().email("Почта выглядит подозрительно 👀"),  
});  

А потом ловить их в ExceptionFilter NestJS и возвращать клиенту в человекочитаемом виде.

А что с производительностью?

• Для небольших DTO разница незаметна.
• На крупных объектах (100+ полей) Zod слегка просаживается, но это решается кешированием схем.
• Зато Zod даёт возможность парсить сложные структуры (типа union, discriminatedUnion), где class-validator требует кастомных декораторов.

Главный вопрос: зачем?

• Если проект уже на class-validator — возможно, не стоит ломать.
• Если стартуете с нуля или хотите единую схему для клиента и сервера (через tRPC, например) — Zod идеален.

[kirilljs]

Ох бекендеры, пришли со своим ООП и типизацией в наш функциональный и динамичный JS…