SlimeForm 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00247/article/details/141594039

SlimeForm 开源项目教程

slimeformForm state management and validation for Vue3项目地址:https://gitcode.com/gh_mirrors/sl/slimeform

项目介绍

SlimeForm 是一个为 Vue3 设计的表单状态管理和验证工具。它旨在提供一个灵活且易于集成的解决方案，帮助开发者管理表单状态和验证规则。SlimeForm 的特点包括：

依赖自由：不内置任何验证规则，允许开发者自由定义。
响应式管理：通过 v-model 绑定原生或自定义组件，实现表单值的响应式管理。
支持第三方规则：如 Yup，提供更强大的验证能力。

项目快速启动

安装

首先，通过 npm 安装 SlimeForm：

npm install slimeform

基本使用

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

import { useForm } from 'slimeform';
import * as yup from 'yup';
import { yupFieldRule } from 'slimeform/resolvers';

const { form, status, reset } = useForm({
  form: () => ({
    age: ''
  }),
  rule: {
    age: [
      yupFieldRule(yup.string().required()),
      yupFieldRule(yup.number().max(120).integer().nullable())
    ]
  }
});

在模板中使用：

<template>
  <h3>Please enter your age</h3>
  <input v-model="form.age" />
  <button @click="reset">Reset</button>
</template>

应用案例和最佳实践

动态表单验证

SlimeForm 支持动态添加和移除验证规则，适用于复杂的表单场景。例如，根据用户输入动态调整验证逻辑：

const { form, status } = useForm({
  form: () => ({
    email: ''
  }),
  rule: {
    email: [
      yupFieldRule(yup.string().email().required())
    ]
  }
});

异步验证

SlimeForm 支持异步验证规则，适用于需要后端验证的场景：

const { form, status } = useForm({
  form: () => ({
    username: ''
  }),
  rule: {
    username: [
      yupFieldRule(yup.string().required(), async (value) => {
        const isUnique = await checkUsernameUnique(value);
        return isUnique ? true : 'Username is already taken';
      })
    ]
  }
});