Svelte Forms Lib 使用教程

Svelte Forms Lib 使用教程

svelte-forms-lib📝. A lightweight library for managing forms in Svelte项目地址:https://gitcode.com/gh_mirrors/sv/svelte-forms-lib

项目介绍

Svelte Forms Lib 是一个轻量级的库，用于在 Svelte 中管理表单，提供类似于 Formik 的 API。该库旨在简化表单的创建和管理，支持表单验证和自定义功能。通过使用 Svelte Forms Lib，开发者可以更高效地处理表单相关的逻辑。

项目快速启动

安装

首先，你需要在你的 Svelte 项目中安装 Svelte Forms Lib：

npm install svelte-forms-lib

基本使用

以下是一个简单的示例，展示如何在 Svelte 项目中使用 Svelte Forms Lib：

<script>
  import { Form, Field } from 'svelte-forms-lib';

  const initialValues = {
    name: '',
    email: ''
  };

  const onSubmit = (values) => {
    console.log('Form submitted with values:', values);
  };
</script>

<Form {initialValues} onSubmit={onSubmit}>
  <Field name="name" as="input" placeholder="Name" />
  <Field name="email" as="input" type="email" placeholder="Email" />
  <button type="submit">Submit</button>
</Form>

应用案例和最佳实践

表单验证

Svelte Forms Lib 支持表单验证，可以使用 Yup 进行验证规则的定义：

<script>
  import { Form, Field } from 'svelte-forms-lib';
  import * as Yup from 'yup';

  const initialValues = {
    name: '',
    email: ''
  };

  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Invalid email').required('Email is required')
  });

  const onSubmit = (values) => {
    console.log('Form submitted with values:', values);
  };
</script>

<Form {initialValues} {validationSchema} onSubmit={onSubmit}>
  <Field name="name" as="input" placeholder="Name" />
  <Field name="email" as="input" type="email" placeholder="Email" />
  <button type="submit">Submit</button>
</Form>

自定义表单组件

你可以创建自定义的表单组件，并在表单中使用它们：

<script>
  import { Form, Field } from 'svelte-forms-lib';

  const initialValues = {
    name: '',
    email: ''
  };

  const onSubmit = (values) => {
    console.log('Form submitted with values:', values);
  };

  const CustomInput = ({ field, form, ...props }) => {
    return (
      <div>
        <input {...field} {...props} />
        {form.touched[field.name] && form.errors[field.name] && (
          <div className="error">{form.errors[field.name]}</div>
        )}
      </div>
    );
  };
</script>

<Form {initialValues} onSubmit={onSubmit}>
  <Field name="name" as={CustomInput} placeholder="Name" />
  <Field name="email" as={CustomInput} type="email" placeholder="Email" />
  <button type="submit">Submit</button>
</Form>

典型生态项目

Svelte Forms Lib 可以与其他 Svelte 生态项目结合使用，例如：

• Sapper: 一个基于 Svelte 的服务端渲染框架，可以与 Svelte Forms Lib 结合使用，提供更丰富的表单管理功能。
• Yup: 一个强大的验证库，可以与 Svelte Forms Lib 结合使用，提供复杂的表单验证逻辑。
• Svelte Material UI: 一个基于 Material Design 的 Svelte 组件库，可以与 Svelte Forms Lib 结合使用，提供美观的表单组件。

通过结合这些生态项目，你可以构建出功能强大且界面美观的表单应用。

svelte-forms-lib📝. A lightweight library for managing forms in Svelte项目地址:https://gitcode.com/gh_mirrors/sv/svelte-forms-lib