Проверка формы важна в веб-разработке, поскольку помогает гарантировать точность и полноту данных, отправляемых через форму. В этом посте вы узнаете, как реализовать проверку формы в приложении Sveltekit с помощью TailwindCSS, библиотеки проверки формы yup и библиотеки проверки формы Felte. К концу этого руководства у вас будет четкое представление о том, как реализовать проверку формы в ваших собственных проектах Sveltekit.
Создать проект Sveltekit
Первым шагом в реализации проверки формы с помощью Svelte, TailwindCSS, Felte и yup является настройка вашего проекта Sveltekit и установка необходимых зависимостей. Если у вас уже есть проект Sveltekit, вы можете пропустить это.
Чтобы настроить новый проект Sveltekit, сначала убедитесь, что на вашем компьютере установлены Node.js и npm. Затем откройте окно терминала и выполните следующую команду, чтобы создать новый проект:
npm create svelte@latest my-app
то вы увидите следующее в своем терминале:
В этом уроке мы выберем второй вариант под названием «Скелетный проект».
Затем они спросят у вас кучу вариантов, например, хотите ли вы добавить проверку типов, ESLint, красивее для форматирования кода, браузерного тестирования и Vitest для модульного тестирования. Для этого урока я выбрал нет для каждого варианта, так как он нам сейчас не нужен:
Теперь, когда вы создали свой проект Sveltekit, перейдите в этот каталог и выполните следующие команды:
#install the dependencies npm install #Serve your project npm run dev
Если все прошло правильно, теперь у вас должен быть работающий проект Sveltekit.
Установка TailwindCSS
Чтобы использовать Tailwindcss в нашем проекте, нам нужно сделать несколько шагов. Сначала нам нужно установить Tailwindcss вместе с Postcss и Autoprefixer. Мы можем сделать это с помощью следующей команды:
npm install -D tailwindcss postcss autoprefixer
Теперь, когда Tailwind установлен, мы собираемся создать конфигурацию Tailwind, используя следующую команду:
npx tailwindcss init tailwind.config.cjs -p
Теперь, когда мы создали конфигурацию Tailwindcss, нам нужно обновить наш svelte.config.js. Нам нужно вставить туда следующий код:
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
},
preprocess: vitePreprocess()
};
export default config;
Теперь вы можете получить ошибку об адаптере. Это можно исправить, запустив:
npm install @sveltejs/adapter-auto
Затем нам нужно обновить нашу конфигурацию Tailwind. Нам нужно вставить следующий код:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
};
После обновления нашей конфигурации Tailwindcss нам нужно создать файл CSS с именем app.css в папке src и вставить следующий код:
@tailwind base; @tailwind components; @tailwind utilities;
И, наконец, нам нужно создать +layout.svelte в папке маршрутов, которая находится в папке src. Вставляем туда следующий код:
<script> import "../app.css"; </script> <slot />
Если все прошло правильно, теперь должен быть установлен Tailwindcss. Чтобы убедиться, что это работает, создайте +page.svelte (если у вас его еще нет) и вставьте следующий код:
<h1 class="text-3xl font-bold underline"> Hello world! </h1>
Теперь вы должны запустить npm run dev и вы должны увидеть h1, выделенный жирным шрифтом с подчеркиванием, который говорит Hello world.
Установите Felte и Yup
Теперь, когда мы установили Tailwindcss, пришло время установить Felte и Yup. Вы можете сделать это, выполнив следующие команды:
#install felte npm install felte #install yup npm install yup
Как только это будет установлено, пришло время создать форму с помощью Tailwindcss.
Создание формы с помощью TailwindCSS
<div class="flex flex-col items-center justify-center w-screen h-screen bg-gray-200 text-gray-700"> <!-- form here --> </div>
Мы начнем с создания flexbox, применив класс «flex» к родительскому div. Применяя класс flex к родительскому div, мы создаем flex-контейнер, и все дочерние элементы будут flex-элементами. Это позволяет нам размещать элементы вертикально с помощью «flex-col», выравнивать дочерние элементы по центру поперечной оси контейнера с помощью «items-center» и использовать «justify-center» для выравнивания элементов по центру основного контейнера. ось. Классы «w-screen» и «h-screen» заставляют родительский элемент div занимать всю ширину и высоту экрана.
<div class="flex flex-col items-center justify-center w-screen h-screen bg-gray-200 text-gray-700">
<h1 class="font-bold text-2xl">Tailwind svelte validation</h1>
<form action="#" method="post" class="flex flex-col bg-white rounded shadow-lg p-12 mt-12">
</form>
</div>
Теперь, когда мы создали гибкий контейнер, мы можем начать с добавления простого заголовка над формой и создания самой формы. Для стилизации формы мы добавим классы «flex» и «flex-col», чтобы расположить все внутри формы вертикально. Чтобы создать пространство, мы добавим отступы, используя «p-12», и немного переместим форму вниз, используя «mt-12». И, наконец, мы добавим немного тени, чтобы она выглядела плавающей, используя «shadow-lg».
Пришло время добавить метки, поля ввода, место для сообщений об ошибках, кнопку отправки и забытый пароль/зарегистрироваться (просто чтобы это выглядело как форма входа) в нашу форму:
<div class="flex flex-col items-center justify-center w-screen h-screen bg-gray-200 text-gray-700">
<h1 class="font-bold text-2xl">Tailwind svelte validation</h1>
<form use:form on:submit|preventDefault action="#" method="post" class="flex flex-col bg-white rounded shadow-lg p-12 mt-12">
<label class="font-semibold text-xs" for="email">Email</label>
<input class="flex items-center h-12 px-4 w-64 bg-gray-200 mt-2 rounded focus:outline-none focus:ring-2" name="email" type="email" />
<!-- error message -->
<span class="text-red-500 text-sm"></span>
<!-- -->
<label class="font-semibold text-xs mt-3" for="password">Password</label>
<input class="flex items-center h-12 px-4 w-64 bg-gray-200 mt-2 rounded focus:outline-none focus:ring-2" name="password" type="password" />
<!-- error message -->
<span class="text-red-500 text-sm"></span>
<!-- -->
<button class="flex items-center justify-center h-12 px-6 w-64 bg-blue-600 mt-8 rounded font-semibold text-sm text-blue-100 hover:bg-blue-700">Login</button>
<div class="flex mt-6 justify-center text-xs">
<a class="text-blue-400 hover:text-blue-500" href="#">Forgot Password</a>
<span class="mx-2 text-gray-300">/</span>
<a class="text-blue-400 hover:text-blue-500" href="#">Sign Up</a>
</div>
</form>
</div>
Теперь ваша форма должна выглядеть так:
Проверка
Теперь мы, наконец, подошли к тому моменту, когда мы собираемся добавить проверку. Чтобы это работало, нам нужно создать тег скрипта и импортировать необходимые библиотеки:
<script>
import { createForm } from "felte";
import * as yup from "yup";
</script>
Теперь, когда мы импортировали библиотеки, мы создадим схему с помощью Yup:
<script>
import { createForm } from "felte";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
});
</script>
Наша схема представляет собой объект, который имеет два свойства: «электронная почта» и «пароль». Строковый метод гарантирует, что ввод на самом деле является строкой, метод электронной почты проверяет, является ли он допустимым форматом электронной почты или нет, а требуемый метод гарантирует, что поля ввода не могут быть пустыми.
Теперь мы фактически проверим наши значения из формы, используя метод createForm из фетра. Этот метод принимает функцию с именем «валидация». Эта функция принимает параметр с именем values, который содержит отправленные значения из формы:
<script>
import { createForm } from "felte";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
});
const { form, errors } = createForm({
validate: async (values) => {
}
});
</script>
Здесь мы можем проверить нашу схему с помощью Yup. У Yup есть метод с именем «validate», который принимает наши значения, а также имеет свойство abortEarly, которое является логическим. Это вернет проверку при первой ошибке, а не после выполнения всех проверок. Вы можете установить значение true, если хотите, но сейчас мы установим значение false, чтобы мы могли отображать все ошибки проверки:
<script>
import { createForm } from "felte";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
});
const { form, errors } = createForm({
validate: async (values) => {
try {
await schema.validate(values, { abortEarly: false });
} catch(err) {
//
}
}
});
</script>
Чтобы получить наши сообщения об ошибках, нам нужно перебрать внутренний массив. Мы можем сделать это, используя метод «reduce». Это создаст для нас объект ошибки, который содержит свойства, названные в честь полей с сообщением об ошибке:
<script>
import { createForm } from "felte";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
password: yup.string().required(),
});
const { form, errors } = createForm({
validate: async (values) => {
try {
await schema.validate(values, { abortEarly: false });
} catch(err) {
const errors = err.inner.reduce((res, value) => ({
[value.path]: value.message,
...res,
}), {});
return errors;
}
}
});
</script>
Теперь нам нужно добавить use:form и on:submit|preventDefault в нашу форму следующим образом:
<form use:form on:submit|preventDefault action="#" method="post" class="flex flex-col bg-white rounded shadow-lg p-12 mt-12">
<!-- The rest of our form -->
</form>
use:form будет обрабатывать связанные с формой задачи, такие как проверка, отправка и обработка ошибок. Мы также добавим on:submit|preventDefault. По умолчанию, когда вы отправляете форму, браузер переходит по URL-адресу, указанному в атрибуте действия, что приводит к перезагрузке страницы. Чтобы отображать сообщения проверки, мы должны предотвратить такое поведение, добавив предотвращение по умолчанию.
И, наконец, мы будем отображать сообщения об ошибках в нашем HTML. Сообщения об ошибках доступны в объекте ошибки:
<form use:form on:submit|preventDefault action="#" method="post" class="flex flex-col bg-white rounded shadow-lg p-12 mt-12">
<label class="font-semibold text-xs" for="email">Email</label>
<input class="flex items-center h-12 px-4 w-64 bg-gray-200 mt-2 rounded focus:outline-none focus:ring-2" name="email" type="email" />
{#if $errors.email}
<span class="text-red-500 text-sm">{$errors.email}</span>
{/if}
<label class="font-semibold text-xs mt-3" for="password">Password</label>
<input class="flex items-center h-12 px-4 w-64 bg-gray-200 mt-2 rounded focus:outline-none focus:ring-2" name="password" type="password" />
{#if $errors.password}
<span class="text-red-500 text-sm">{$errors.password}</span>
{/if}
<button class="flex items-center justify-center h-12 px-6 w-64 bg-blue-600 mt-8 rounded font-semibold text-sm text-blue-100 hover:bg-blue-700">Login</button>
<div class="flex mt-6 justify-center text-xs">
<a class="text-blue-400 hover:text-blue-500" href="#">Forgot Password</a>
<span class="mx-2 text-gray-300">/</span>
<a class="text-blue-400 hover:text-blue-500" href="#">Sign Up</a>
</div>
</form>
Вот и все, вот как вы проверяете свою форму с помощью войлока и yup. Теперь еще одна вещь для да. Чтобы отобразить пользовательские сообщения об ошибках в yup, вы можете передать строку в качестве аргумента:
const schema = yup.object({
email: yup.string().email('This field must be an email').required('This field is required'),
password: yup.string().required('This field is required'),
});
Полный код доступен на github: https://github.com/Heesel/Sveltekit-felte-yup-tailwind.
