Валидация форм является важной частью frontend-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.

Что такое AJV?

AJV (Another JSON Schema Validator) - это быстрая библиотека валидации данных в формате JSON с поддержкой JSON Schema. JSON Schema - это язык описания структуры и валидации данных в формате JSON. AJV позволяет проверять данные по подготовленным схемам валидации.

Подготовка проекта

Прежде чем начать, убедитесь, что у вас уже есть:

Node.js v18.16.1.
@vue/cli 5.0.8

Давайте создадим проект новый проект с помощью Vue CLI с такими параметрами:

vue create ajv-validation

Установим необходимые зависимости в нашем проекте:

npm install ajv ajv-formats ajv-errors

Создание файлы схемы валидации login.json

{
  "$id": "/login.json",
  "type": "object",
  "additionalProperties": false,
  "required": ["login", "password"],
  "properties": {
    "login": {
      "type": "string",
      "format": "email",
      "errorMessage": "enter a valid email address"
    },
    "password": {
      "type": "string",
      "minLength": 6,
      "maxLength": 1024
    }
  }
}

В этой схеме мы определяем тип каждого поля (строка), а также устанавливаем некоторые правила валидации, такие как формат email и минимальная длина пароля. Поля "login" и "password" обязательны для заполнения.

Давайте кратко пройдёмся по 2 важным методам:

onLogin — это метод, который вызывается при попытке входа пользователя в систему (логине). Он выполняет проверку и валидацию введенных пользователем данных и предпринимает соответствующие действия в зависимости от результата проверки.

Проверка введенных данных на корректность с помощью функции валидации validate. Эта функция использует схему валидации данных и проверяет соответствие данных этой схеме. Возвращается флаг isValid, который указывает, прошла ли валидация успешно.
Если данные некорректны (isValid равен false), выполняется обработка ошибок.

function onLogin() {
      errors.value.clear();
      if (validator.validate("/login.json", formData.value)) {
        // valid, do nothing
      } else if (validator.errors?.length) {
        for (const [, e] of validator.errors.entries()) {
          if (!e.message) {
            continue;
          }
          const fieldName = e.instancePath.substring(1);
          const fieldErrors: string[] = errors.value.get(fieldName) || [];
          fieldErrors.push(e.message);
          errors.value.set(fieldName, fieldErrors);
        }
      }
    }

onBlur — это метод, который вызывается при событии "blur" (потеря фокуса) на текстовом поле ввода формы. Он используется для валидации данных, введенных пользователем, когда пользователь переходит с поля на другой элемент формы или щелкает вне текстового поля.

Получить имя (идентификатор) и значение поля ввода, на котором произошло событие "blur".
Получить схему валидации для данного поля.
Проверка значения поля на корректность с помощью функции валидации validate.
Если значение поля некорректно (isValid равен false), выполняется обработка ошибки.

function onBlur(e: any) {
      const fieldName = e.target.id;
      const fieldValue = e.target.value;
      if (
        validator.validate(`/login.json#/properties/${fieldName}`, fieldValue)
      ) {
        errors.value.delete(fieldName);
      } else if (validator.errors?.length) {
        errors.value.set(
          fieldName,
          validator.errors.map((e) => e.message) as string[]
        );
      }
    }

Заключение

Теперь у вас есть пример, как использовать AJV с Vue.js и TypeScript для валидации формы. Это позволяет создавать мощные и гибкие системы валидации, которые помогут улучшить пользовательский опыт и обеспечить корректную обработку данных на сервере.

Исходный код

<template>
  <div class="login-form">
    <h2>Login</h2>
    <form @submit.prevent="onLogin">
      <div class="form-group">
        <label for="login">Email</label>
        <input
          v-model="formData.login"
          :class="{ 'is-invalid': isInvalid(errors.has('login')) }"
          @blur="onBlur"
          type="text"
          id="login"
          placeholder="Enter your email"
        />
        <ul class="error-wrapper">
          <li v-for="errorMsg of errors.get('login')" :key="errorMsg">
            {{ errorMsg }}
          </li>
        </ul>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input
          v-model="formData.password"
          :class="{ 'is-invalid': isInvalid(errors.has('password')) }"
          @blur="onBlur"
          type="password"
          id="password"
          placeholder="Enter your password"
        />

        <ul class="error-wrapper">
          <li v-for="errorMsg of errors.get('password')" :key="errorMsg">
            {{ errorMsg }}
          </li>
        </ul>
      </div>

      <button type="submit" :disabled="errors.size > 0" @click="submit('ok')">
        Login
      </button>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import login from "@/schemas/login.json";
import Ajv from "ajv";
import ajvFormats from "ajv-formats";
import ajvErrors from "ajv-errors";

export default defineComponent({
  setup() {
    const formData = ref({
      login: "",
      password: "",
    });

    const opts = { allErrors: true };
    const validator = ajvErrors(ajvFormats(new Ajv(opts)));
    validator.addSchema(login);

    let errors = ref<Map<string, string[]>>(new Map());
    watch(
      () => errors.value,
      () => void 0
    );

    function onBlur(e: any) {
      const fieldName = e.target.id;
      const fieldValue = e.target.value;
      if (
        validator.validate(`/login.json#/properties/${fieldName}`, fieldValue)
      ) {
        errors.value.delete(fieldName);
      } else if (validator.errors?.length) {
        errors.value.set(
          fieldName,
          validator.errors.map((e) => e.message) as string[]
        );
      }
    }

    function onLogin() {
      errors.value.clear();
      if (validator.validate("/login.json", formData.value)) {
        // valid, do nothing
      } else if (validator.errors?.length) {
        for (const [, e] of validator.errors.entries()) {
          if (!e.message) {
            continue;
          }
          const fieldName = e.instancePath.substring(1);
          const fieldErrors: string[] = errors.value.get(fieldName) || [];
          fieldErrors.push(e.message);
          errors.value.set(fieldName, fieldErrors);
        }
      }
    }

    function formColor(error: any) {
      return error?.length;
    }

    function submit(text: string) {
      alert(text);
    }

    return {
      formData,
      errors,
      isInvalid: formColor,
      onBlur,
      onLogin,
      submit,
    };
  },
});
</script>

<style>
body {
  font-family: sans-serif;
}

.login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
}

.is-invalid {
  border: 1px solid red;
}

.error-wrapper {
  color: red;
  font-size: 12px;
  margin: 0;
  padding: 0 20px;
}
</style>

Валидация формы с помощью AJV, Vue.js и TypeScript