Svelte中的顶级表单验证库 2021-10-30 默认分类 暂无评论 2985 次阅读 ![canvas.png][1] 简介 -- 表单验证是很难的。这就是为什么有几个库可以为我们处理表单验证，所以我们不必自己设置自定义的验证解决方案。每个项目都有不同的表单验证需求，没有一个放之四海而皆准的解决方案。 因此，在这篇文章中，我将带领你了解最流行、最活跃的Svelte表单验证库，以帮助你选择在下一个项目中使用哪一个。我选择这七个库的依据是它们的GitHub星级和npm下载量，所以你可以确信你选择的库在其他开发者中很受欢迎。 这些库的情况如下。 因此，在这篇文章中，我将带领你了解最流行、最活跃的Svelte表单验证库，以帮助你选择在下一个项目中使用哪一个。我选择这七个库的依据是它们的GitHub星级和npm下载量，所以你可以确信你选择的库在其他开发者中很受欢迎。 这些库的情况如下。 1. Svelte forms lib 2. Felte 3. Svelte Use Form 4. Svelte Final Form 5. Svelte-yup 6. Sveltik 7. Sveltejs-forms Svelte forms lib ---------------- Svelte forms lib是一个受Formik启发的库，用于在Svelte项目中轻松构建表单。虽然它的功能不多，但它能很好地处理验证表单和显示错误的基本情况。Svelte forms lib是一个很好的、轻量级的库，在设置基本表单验证时可以使用。 设置 -- 在你的终端运行下面的命令来安装这个库: npm i svelte-forms-lib 将Svelte表单库集成到一个表单中的核心在于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表单库还提供了可观察值，为我们提供表单当前状态的信息。你可以在这里查看可用的观察值的列表。 我们传递一个配置对象作为参数给createForm。在这里，我们定义了表单的初始值和一个处理表单提交的 onSubmit 处理程序。在配置了createForm之后，我们需要将配置文件表单与Svelte表单库挂钩，这样它就可以跟踪表单的值并处理提交。 为了做到这一点，我们将handleSubmit辅助程序传递给表单元素。我们还将handleChange传递给输入字段，并将它们的值绑定到表单的可观察值。 验证 -- Svelte forms lib支持通过validationSchema道具对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> 它提供了表单、字段、选择和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中，我们拉出一个表单动作，通过Svelte的use指令传递给HTML的表单元素。这就是你需要将Felte整合到你的表单中，并使其成为表单反应式的全部内容。 createForm接受一个配置对象，我们用Yup设置验证，并定义一个onSubmit函数来处理表单提交。 验证 -- 有了Felte，你可以建立自己的自定义验证，或使用Yup、Zod或Superstruct等库。 在上面的代码片段中，我们使用Yup。我们从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的表单元素上。 <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, and required。 useForm用于在Svelte Use Form中注册表单。Hint和HintGroup用于显示每个字段的验证错误。minLength, email, and required是我们传递给验证器的验证检查。 验证 -- Svelte Use Form导出了一个validators函数，我们可以用它来给输入字段添加验证。我们使用use指令将验证器链接到输入字段。 对于姓名输入，我们将其设置为必填，最小长度为五个字符。对于电子邮件输入，我们将其设置为必填，以检查电子邮件必须是有效的。 开发者经验 ----- Svelte Use Form并没有提供一个可以用来处理表单提交的提交处理程序。另外，也没有存储表单值的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有一个与React Final Form类似的API。如果你熟悉这些，你会发现这个库很容易操作: <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类似，Field将输入和元组件传递给它的输入字段子代。 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提供了表单和消息组件，我们可以用它来集成到我们的表单中: <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被调用时，我们将submit设置为true。然而，核心验证是在schema.isValidSync(fields)中进行的。我们将这个验证检查的结果存储在isValid变量中，如果它是有效的，我们就提交表单数据。 开发者经验 ----- 没有内置的方法来检查表单和验证状态，所以我们必须为它们设置提交和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对象。它使用名称道具与状态相匹配，并自动使状态与输入值保持同步。它默认会渲染一个HTML输入字段。 验证 -- Sveltik没有像Svelte forms lib那样提供开箱即用的Yup集成，它的validationSchema道具。这意味着我们必须自己创建自定义验证，如上面的代码片段。 在validate函数中，我们对姓名和电子邮件输入字段进行验证检查，并根据错误情况，相应地更新错误对象。 开发者经验 ----- 因为Sveltik是一个受Formik启发的库，任何有Formik使用经验的人都会发现它很容易操作。字段和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> 在这里，我们通过向Input组件传递必要的名称和类型props来设置输入字段。表单组件接受validateOnBlur和validateOnChange道具，我们在这两个道具中定义验证应该何时运行。 我们设置了一个handleSubmit函数，传递给Form的on:submit事件。这就是建立一个基本的集成所需要的一切 验证 -- Sveltejs-forms支持Yup的验证。表单有一个模式道具，我们在这里传递我们为输入字段定义的验证模式。我们定义的每个模式的名称必须与每个输入字段的名称属性相对应。有了这个，Form就可以跟踪每个字段的有效性和错误。 如何显示错误呢？Form和Input组件为我们处理这个问题。Form不只是跟踪每个字段的有效性和错误，它还创建了一个存储错误对象的上下文。输入组件访问该错误对象，并有条件地显示给定字段中存在的任何错误。 开发者经验 ----- sveltejs-forms提供的自定义组件可以抽象处理诸如on:change、on:blur、on:input以及为我们设置输入值等事项，这是一个巨大的开发者经验优势。这使得表单的设置不仅简单，而且快速。表单数据被跟踪和存储，所以我们不需要自己去绑定输入和存储数据。 然而，我们确实必须手动重置输入字段。如果我们有15个输入，这将是重复和乏味的。如果有一个resetForm方法，或者类似的方法，可以被调用来为我们重置输入字段，那就更好了。 Sveltejs-forms有一个简单明了的文档。它很简短，因为它是一个简单的库，很容易上手。它还涵盖了如何与自定义组件一起工作。 Svelte表单验证库的概述 -------------- <table> <thead> <tr> <th></th> <th style="text-align: center;">GitHub stars</th> <th style="text-align: center;">Weekly npm downloads</th> <th style="text-align: center;">Minified + Gzipped bundle size</th> <th style="text-align: center;">Yup integration</th> <th style="text-align: center;">Documentation</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;"><strong>Svelte forms lib</strong></td> <td style="text-align: center;">331</td> <td style="text-align: center;">1,148</td> <td style="text-align: center;">5.2kb</td> <td style="text-align: center;">Yes</td> <td style="text-align: center;">Great</td> </tr> <tr> <td style="text-align: center;"><strong>Felte</strong></td> <td style="text-align: center;">158</td> <td style="text-align: center;">771</td> <td style="text-align: center;">4kb</td> <td style="text-align: center;">Yes</td> <td style="text-align: center;">Great</td> </tr> <tr> <td style="text-align: center;"><strong>Svelte Use Form</strong></td> <td style="text-align: center;">91</td> <td style="text-align: center;">878</td> <td style="text-align: center;">3.5kb</td> <td style="text-align: center;">No</td> <td style="text-align: center;">Good</td> </tr> <tr> <td style="text-align: center;"><strong>Svelte Final Form</strong></td> <td style="text-align: center;">32</td> <td style="text-align: center;">131</td> <td style="text-align: center;">5.6kb</td> <td style="text-align: center;">No</td> <td style="text-align: center;">Basic</td> </tr> <tr> <td style="text-align: center;"><strong>svelte-yup</strong></td> <td style="text-align: center;">18</td> <td style="text-align: center;">81</td> <td style="text-align: center;">4.1kb</td> <td style="text-align: center;">Yes</td> <td style="text-align: center;">Great</td> </tr> <tr> <td style="text-align: center;"><strong>Sveltik</strong></td> <td style="text-align: center;">165</td> <td style="text-align: center;">50</td> <td style="text-align: center;">14.4kb</td> <td style="text-align: center;">No</td> <td style="text-align: center;">Good</td> </tr> <tr> <td style="text-align: center;"><strong>sveltejs-forms</strong></td> <td style="text-align: center;">179</td> <td style="text-align: center;">351</td> <td style="text-align: center;">8kb</td> <td style="text-align: center;">Yes</td> <td style="text-align: center;">Good</td> </tr> </tbody> </table> 总结 -- 在这篇文章中，我们介绍了Svelte中的顶级表单验证库。到目前为止，Svelte表单库已经满足了我对表单处理和验证的需求，而且我总是在可以的时候使用它。 说到底，每个库都有自己的优点。当决定将来使用哪个库时，请检查我们讨论过的指标，并根据你的应用程序的目标和要求进行权衡。 [1]: http://guobacai.com/usr/uploads/2021/10/4143086681.png 标签: npm, 组件, form, svelte, email, 验证, yup
评论已关闭