简介
表单验证是很难的。这就是为什么有几个库可以为我们处理表单验证，所以我们不必自己设置自定义的验证解决方案。每个项目都有不同的表单验证需求，没有一个放之四海而皆准的解决方案。
因此，在这篇文章中，我将带领你了解最流行、最活跃的Svelte表单验证库，以帮助你选择在下一个项目中使用哪一个。我选择这七个库的依据是它们的GitHub星级和npm下载量，所以你可以确信你选择的库在其他开发者中很受欢迎。
这些库的情况如下。
Svelte forms lib
Svelte forms lib是一个受Formik启发的库，用于在Svelte项目中轻松构建表单。虽然它的功能不多，但它能很好地处理验证表单和显示错误的基本情况。在设置基本的表单验证时，Svelte forms lib是一个很好的、轻便的库。
设置
在你的终端运行下面的命令来安装该库。
npm i svelte-forms-lib
将Svelte forms lib集成到一个表单中的核心在于createForm ，如图所示。
<script>
import { createForm } from "svelte-forms-lib";
import * as yup from "yup";
const { form, errors, state, handleChange, handleSubmit } = createForm({
initialValues: {
name: "",
email: ""
},
validationSchema: yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required()
}),
onSubmit: values => {
alert(JSON.stringify(values));
}
});
</script>
<form on:submit={handleSubmit}>
<input
id="name"
name="name"
on:change={handleChange}
on:blur={handleChange}
bind:value={$form.name}
placeholder="name"
/>
{#if $errors.name}
<small>{$errors.name}</small>
{/if}
<input
id="email"
name="email"
on:change={handleChange}
on:blur={handleChange}
bind:value={$form.email}
placeholder="email"
/>
{#if $errors.email}
<small>{$errors.email}</small>
{/if}
<button type="submit">submit</button>
</form>
createForm 让我们能够访问有用的表单帮助，如handleChange 和handleSubmit ，以及其他一些。我们将需要这些帮助函数来设置表单。
除了辅助函数之外，Svelte forms lib还公开了可观察的值，这些值可以给我们提供表单当前状态的信息。你可以在这里查看可用的观察值的列表。
我们将一个配置对象作为参数传给createForm 。在这里，我们定义了表单的initialValues ，以及一个处理表单提交的onSubmit 。在配置了createForm ，我们需要将配置文件表单与Svelte表单库挂钩，这样它就可以跟踪表单的值并处理提交。
为了做到这一点，我们将handleSubmit 帮助器传递给form 元素。我们还将handleChange 传递给输入字段，并将bind 它们的值传递给form 观察器。
验证
Svelte forms lib通过一个validationSchema prop支持Yup的验证，它接收了一个模式对象。Svelte forms lib还支持自定义验证。
开发者体验
作为一个受Formik启发的库，Svelte forms lib有一个类似的API。一个有React背景的开发者会发现这个库很容易操作。
另一个开发者体验的优点是，和Formik一样，Svelte forms lib提供了自定义组件。
<script>
import { Form, Field, ErrorMessage, Select } from "svelte-forms-lib";
import schema from "./schema";
const formProps = {
initialValues: {},
validationSchema: schema,
onSubmit: (values) => {
alert(JSON.stringify(values));
},
};
</script>
<div class="container">
<h1>Registration Form</h1>
<Form {...formProps}>
<div>
<Field type="text" name="name" placeholder="Name" />
<ErrorMessage name="name" />
</div>
<div>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" />
</div>
<button type="submit">Submit</button>
</Form>
</div>
它提供了Form 、Field 、Select 、ErrorMessage 等组件。使用这些自定义组件可以减少模板，使表单代码非常简明。我们不再需要为每个字段有条件地呈现错误，因为ErrorMessage 为我们处理。
Svelte forms lib有简单易懂、适合初学者的文档。文档中提供了几个涵盖不同用例的例子，以及可以轻松复制的代码片段。
Felte
Felte是Svelte的一个简单表单库，旨在帮助表单管理和验证变得简单。Felte的功能涵盖了多个表单处理和验证用例。由于Felte有多种集成功能，它可能会让人不知所措。因此，我建议你只在多步骤表单等复杂情况下使用它。
设置
在你的终端运行下面的命令来安装这个库。
npm i felte
Felte提供了一个createForm 函数，我们可以用它来设置表单，就像这样。
<script>
import { createForm } from "felte";
import { validator } from "@felte/validator-yup";
import * as yup from "yup";
const schema = yup.object({
email: yup.string().email().required(),
name: yup.string().required(),
});
const { form, errors } = createForm({
extend: validator,
validateSchema: schema,
onSubmit: async (values) => {
alert(JSON.stringify(values));
},
});
</script>
<form use:form on:submit|preventDefault>
<input type="text" name="name" />
{#if $errors.name}
<span class="error">{$errors.name}</span>
{/if}
<input type="email" name="email" />
{#if $errors.email}
<span class="error">{$errors.email}</span>
{/if}
<button type="submit">Submit</button>
</form>
从createForm ，我们拉出一个form 动作，通过Svelte的use 指令传递给HTML的form 元素。这就是你所需要的，将Felte整合到你的表单中，使其成为表单反应式。
createForm 接受一个配置对象，在这里我们用Yup设置验证，并定义一个onSubmit 函数来处理表单提交。
验证
有了Felte，你可以建立自己的自定义验证，或使用Yup、Zod或Superstruct等库。
在上面的代码片段中，我们使用Yup。errors 我们从createForm ，有条件地显示与每个输入字段相关的错误。
开发者经验
Felte是一个对初学者友好的库，充满了大量的功能和选项。我喜欢它支持Yup的验证，尽管我们必须安装一个第三方库，@felte/validator-yup ，来设置它。
Felte有非常详细、有组织、易理解的文档，其中充满了演示和代码片段，涵盖了几个使用案例。
Svelte使用表格
Svelte Use Form是一个易于使用的表单库，它可以处理每个输入字段的验证和状态，并能很好地处理基本的表单验证和整合。然而，它并没有为多步骤表单等高级情况提供开箱即用的处理方法。它支持输入、textarea、选择、单选按钮和复选框。
设置
在你的终端运行下面的命令来安装该库。
npm i -D svelte-use-form
Svelte Use Form提供了一个useForm 函数，我们可以通过Svelte的use 指令将其与HTML的form 元素挂钩。
<script>
import {useForm, Hint, HintGroup, validators, minLength,email,required} from "svelte-use-form";
const form = useForm();
let formData = {}; //we store the form values here
const onSubmit = () => {
$form.touched = true;
if ($form.valid) {
alert(JSON.stringify(formData));
}
};
</script>
<form use:form>
<div class="form-row">
<label for="name">Name</label>
<input
type="name"
name="name"
bind:value={formData.name}
use:validators={[required, minLength(5)]}
/>
<HintGroup for="name">
<Hint on="required">Name is required</Hint>
<Hint on="minLength" hideWhenRequired let:value>
Name requires at least {value} characters.</Hint
>
</HintGroup>
</div>
<div class="form-row">
<label for="email">Email</label>
<input
type="email"
name="email"
use:validators={[required, email]}
bind:value={formData.email}
/>
<HintGroup for="email">
<Hint on="required">Email is required</Hint>
<Hint on="email" hideWhenRequired>Email is not valid</Hint>
</HintGroup>
</div>
<button type="submit" on:click|preventDefault={onSubmit}>Sign In</button>
</form>
我喜欢使用Svelte Use Form的一个原因是它很容易与表单整合。我们可以导入useForm,Hint,HintGroup,validators,minLength,email, 和required 。
useForm 用于在Svelte Use Form中注册表单。Hint 和HintGroup 用来显示每个字段的验证错误。minLength,email, 和required 是我们传递给validators 的验证检查。
验证
Svelte Use Form导出了一个validators 函数，我们可以用它来给输入字段添加验证。我们使用use 指令将validators 链接到输入字段。
对于name 输入，我们将其设置为required ，而其minLength 为五个字符。对于email 输入，我们将其设置为required ，以检查电子邮件是否必须有效。
开发者经验
Svelte Use Form并没有提供一个可以用来处理表单提交的submit 处理程序。另外，也没有values 对象或类似的东西来存储表单的值，所以我们必须将输入字段的值绑定到formData 对象上。
当我写这篇文章时，在使用Hint 或HintGroup 时，没有办法对错误信息进行样式化。如果我们想对错误信息进行样式化，我们将不得不这样做。
{#if $form.title?.touched && $form.title?.errors.minLength}
<span class="error">The title requires at least {$form.title.errors.minLength} characters.</span>
{/if}
Svelte Use Form有坚实、清晰的文档。提供了一些演示，展示了该库如何在不同类型的输入字段中工作，这使得Svelte Use Form更容易操作。
Svelte Final Form
Svelte Final Form是Final Form的一个Svelte包装器，Final Form是一个与框架无关的表单库。
设置
在你的终端上运行下面的命令来安装该库。
npm i --save final-form svelte-final-form
Svelte Final Form的API与React Final Form相似。如果你熟悉这些，你会发现这个库很容易操作。
<script>
import { Form, Field } from "svelte-final-form";
const initialValues = {
name: "Nefe",
email: "nefejames@yahoo.com",
};
const onSubmit = (values) => {
alert(JSON.stringify(values));
};
const validate = (values) => {
const errors = {};
if (!values.name) {
errors.name = "Name is required";
}
if (!values.email) {
errors.email = "Email is Required";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
errors.email = "Invalid emaill address";
}
return errors;
};
</script>
<Form {onSubmit} {validate} {initialValues} let:form let:state>
<form on:submit|preventDefault={form.submit}>
<Field name="name" let:input let:meta>
<label for="name">Name</label>
<input
name={input.name}
on:blur={input.onBlur}
on:focus={input.onFocus}
on:input={(e) => input.onChange(e.target.value)}
type="text"
value={input.value}
/>
{#if meta.touched && meta.error}
<span class="error">{meta.error}</span>
{/if}
</Field>
<Field name="email" let:input let:meta>
<label for="email">Name</label>
<input
name={input.email}
on:blur={input.onBlur}
on:focus={input.onFocus}
on:input={(e) => input.onChange(e.target.value)}
type="text"
value={input.value}
/>
{#if meta.touched && meta.error}
<span class="error">{meta.error}</span>
{/if}
</Field>
<button type="submit" disabled={state.submitting}>Submit</button>
</form>
</Form>
Form 组件是Svelte Final Form提供的一个特殊的包装器，用于管理表单的状态。Form 通过let 指令将form 和state 组件传递给它的子节点。
与Form 相似，Field 将input 和meta 组件传递给它的输入字段子代。
input 包含我们需要传递给输入字段的必要方法，如onBlur,onFocus, 和onChange 。meta 对象包含表单的状态信息。我们通过meta 来确定输入是否被触及，或者是否有错误。
验证
Svelte Final Form不支持用Yup或其他对象验证模式进行验证，所以我们必须自己创建一个自定义验证。
validate 函数处理表单的验证。当用户提交表单并且所有的验证都通过后，onSubmit 函数将被调用，其中包含你的表单的值。
开发者体验
Svelte Final Form让表单验证变得更棒更有趣。它不仅能 "正常工作"，而且还能让人轻松理解代码的工作原理。
它有一个对初学者友好的API，至于表单提交，Form ，有一个onSubmit 的道具，可以接收一个提交函数。我们不需要跟踪表单数据，因为Svelte Final Form为我们处理了这些。
Svelte Final Form没有一个深入的文档库，因为它不需要；它很容易理解。不过，如果能有更多的演示，那就太棒了。
Svelte-yup
Svelte-yup是一个Svelte组件库，用于用Yup验证表单。虽然svelte-yup支持Yup的表单验证，但你必须创建验证集成，而不像其他库那样为你处理。如果对Yup有更深的了解，可能需要对svelte-yup有更多的了解，才能使其发挥最大的作用。
设置
在你的终端运行下面的命令来安装这个库。
npm i svelte-yup yup
Svelte-yup提供了Form 和Message 组件，我们可以用它来集成到我们的表单中。
<script>
import * as yup from 'yup';
import {Form, Message} from 'svelte-yup';
let schema = yup.object().shape({
name: yup.string().required().max(30).label("Name"),
email: yup.string().required().email().label("Email address"),
});
let fields = {name: "", email: ""};
let submitted = false;
let isValid;
function formSubmit(){
submitted = true;
isValid = schema.isValidSync(fields);
if(isValid){
alert(JSON.stringify(fields));
}
}
</script>
<Form {schema} {fields} submitHandler={formSubmit} {submitted}>
<input type="text" bind:value={fields.name} placeholder="Name">
<Message name="name" />
<input type="text" bind:value={fields.email} placeholder="Email address">
<Message name="email" />
<button type="submit">Submit</button>
</Form>
验证
Svelte-yup依靠Yup来处理表单验证。当formSubmit 被调用时，我们将submitted 设置为true 。然而，核心验证发生在schema.isValidSync(fields) 。我们将这个验证检查的结果存储在isValid 变量中，如果它是有效的，我们就提交表单数据。
开发者经验
没有内置的方法来检查表单和验证状态，所以我们必须为它们设置submitted 和isValid 变量。
Svelte-yup自带Form和Message 组件，Message ，为我们处理显示表单错误，这对开发者的体验是一个加分项。
因为svelte-yup用Yup处理验证问题，熟悉Yup的人不需要学习新的验证语法。这使得它很容易操作。
svelte-yup的文档结构良好，内容详细。文档中提供了演示，甚至展示了如何将其与Material UI和Bootstrap自定义表单字段一起使用。
Sveltik
与Svelte表单库类似，Sveltik也是一个受Formik启发的库，用于处理Svelte中的表单。作为一个受Formik启发的库，你可以根据Formik的使用方式来学习Sveltik的可能使用方式。你可以把Formik的例子作为如何将Sveltik整合到你的应用程序中的指南。
设置
在你的终端运行下面的命令来安装这个库。
npm i sveltik
Sveltik自带了Sveltik 、Form 、Field 和ErrorMessage 等自定义组件，我们可以在设置表单时这样使用它们。
<script>
import { Sveltik, Form, Field, ErrorMessage } from 'sveltik'
let initialValues = {
name: '',
email: '',
}
let validate = values => {
const errors = {}
if(!values.name){
errors.name = "Name is required"
}
if (!values.email) {
errors.email = 'Email is required'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}
return errors
}
let onSubmit = (values) => {
alert(JSON.stringify(values))
}
</script>
<Sveltik {initialValues} {validate} {onSubmit}>
<Form>
<div class="form-row">
<Field type="text" name="name" />
<ErrorMessage name="name" as="span" />
</div>
<div class="form-row">
<Field type="email" name="email" />
<ErrorMessage name="email" as="span" />
</div>
<button type="submit">Submit</button>
</Form>
</Sveltik>
在Sveltik 组件中，我们传入initialValues,validate, 和onSubmit 道具。
initialValues 是一个保存各自表单字段初始值的对象，validate 接受一个处理表单验证的函数，onSumbit 接受一个处理提交表单的函数。只有当表单字段中没有错误时才会运行。
Form 是一个围绕HTML<form> 元素的小封装器，它自动连接到Sveltik的handleSubmit 和handleReset 。如果某个字段被访问并有错误，ErrorMessage 会显示该字段的错误信息。
Field 自动将输入的onChange,onBlur, 和value 属性分别链接到Formik的handleChange,handleBlur, 和values 对象。它使用name 道具与状态相匹配，并自动使状态与输入值保持同步。它默认会渲染一个HTML输入字段。
验证
Sveltik没有像Svelte forms lib那样提供开箱即用的Yup集成，它使用的是validationSchema 道具。这意味着我们必须自己创建自定义验证，如上面的代码片段。
在validate 函数中，我们对name 和email 输入字段进行验证检查，并根据错误情况，相应地更新errors 对象。
开发者经验
因为Sveltik是一个受Formik启发的库，任何有Formik使用经验的人都会发现它很容易操作。Field 和ErrorMessage 组件抽象了重复的模板代码，如设置onBlur,onChange, 并跟踪每个字段的值。
这不仅使Sveltik成为一个对初学者友好的库，而且还提供了一个很好的开发者体验。
Sveltik有一个易于理解的文档。然而，如果能看到更多涵盖不同场景的演示，那就更好了。
Sveltejs-forms
通过sveltejs-forms，我们可以在Svelte中制作声明式表单。它提供了Input 、Select 、Choice ，使集成变得更容易。你不需要设置onChange 、onBlur 、和其他表单事件处理程序，因为这些组件抽象了这些处理程序。
设置
在你的终端运行下面的命令来安装这个库。
npm i sveltejs-forms
我喜欢使用sveltejs-forms的工作方式，它非常简单。我可以看出在开发这个库时花了很多心思；它提供了自定义表单、输入、选择和复选框组件，我们可以用它来设置表单。
<script>
import { Form, Input } from "sveltejs-forms";
import * as yup from "yup";
function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {
alert(JSON.stringify(values));
setSubmitting(false);
resetForm({ name: "", email: "" });
}
let schema = yup.object().shape({
name: yup.string().required().label("Name"),
email: yup.string().required().email().label("Email address"),
});
</script>
<Form
{schema}
validateOnBlur={false}
validateOnChange={false}
on:submit={handleSubmit}
>
<Input name="name" type="text" label="Name" placeholder="Name" />
<Input name="email" label="Email Address" placeholder="Email" />
<button type="submit">Submit</button>
</Form>
在这里，我们通过将必要的name 和type props传递给Input 组件来设置输入字段。Form 组件接受validateOnBlur 和validateOnChange props，我们在这里定义验证应该何时运行。
我们设置了一个handleSubmit 函数，传递给Form'son:submit 事件。这就是建立一个基本的集成所需要做的一切
验证
Sveltejs-forms支持Yup的验证。Form ，有一个schema 道具，我们在这里传递我们为输入字段定义的验证模式。我们定义的每个模式的名称必须与每个输入字段的名称属性相对应。有了这个，Form 就可以跟踪每个字段的有效性和错误。
如何显示错误？Form 和Input 组件为我们处理这个问题。Form 不只是跟踪每个字段的有效性和错误，它还创建了一个存储errors 对象的环境。Input 组件访问该errors 对象，并有条件地显示在给定字段中存在的任何错误。
开发者经验
sveltejs-forms提供的自定义组件可以抽象处理诸如on:change 、on:blur 、on:input ，并为我们设置输入值，这是一个巨大的开发者经验优势。这使得表单的设置不仅简单，而且快速。表单数据是为我们跟踪和存储的，所以我们不需要自己去绑定输入和存储数据。
然而，我们确实必须手动重置输入字段。如果我们有15个输入，这将是重复和乏味的。如果有一个resetForm ，或者类似的方法，可以被调用来为我们重置输入字段，那就更好了。
Sveltejs-forms有一个简单明了的文档。它很简短，因为它是一个简单的库，很容易上手。它还涵盖了如何与自定义组件一起工作。
Svelte表单验证库的概述
| GitHub明星 | 每周npm下载量 | 最小化+Gzipped包的大小 | 融合了Yup | 文档 | |
|---|---|---|---|---|---|
| Svelte forms lib | 331 | 1,148 | 5.2kb | 是的 | 很好 |
| 菲尔特 | 158 | 771 | 4kb | 是的 | 优秀 |
| 斯维尔特使用表 | 91 | 878 | 3.5kb | 没有 | 好的 |
| 斯维尔特的最终形式 | 32 | 131 | 5.6kb | 没有 | 基本的 |
| svelte-yup | 18 | 81 | 4.1kb | 是的。 | 伟大的 |
| 斯维尔提克 | 165 | 50 | 14.4kb | 没有 | 好的 |
| 样式 | 179 | 351 | 8kb | 有 | 很好 |
总结
在这篇文章中，我们介绍了Svelte中的顶级表单验证库。到目前为止，Svelte表单库已经满足了我对表单处理和验证的需求，而且我总是在可以的时候使用它。
说到底，每个库都有自己的优点。当决定将来使用哪个库时，请检查我们讨论的指标，并根据你的应用程序的目标和要求进行权衡。
The postTop form validation libraries in Svelteappeared first onLogRocket Blog.
