Проверка стала проще с 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
  }
}