SlimeForm

English | 简体中文

Form state management and validation

Why?

We usually use all sorts of different pre-made form components in vue projects which may be written by ourselves, or come from other third-party UI libraries. As for those third-party UI libraries, they might shipped their own form validators with libraries, however we still will need to build our form validators for those components written by us. In most of the time, those form validators were not ‘unified’ or we say compatible to the others, especially when you mixed your own components with third-party components together in one project where thing might become tricky.

Base on modern CSS utilities class and component-based design, it has now become way more easier to write your own <input> component in specific style and assemble them as a form, however, when you need to integrate form state management and rule validation with all the related input fields, the problem will be more complex.

So I started to experiment a solution to achieve this kind of functionalities, and naming it with SlimeForm, which means this utilities would try it best to fit in the forms just like the slime does 💙.

SlimeForm is a form state management and validator which is dependency free, no internal validation rules shipped and required. By binding all native or custom components through v-model, SlimeForm is able to manage and validate values reactively.

TODO

Improve the functionalities

Use reactive type to return the form
For a single rule, the array can be omitted
Mark whether the value of the form has been modified

Documentations
Better type definitions for Typescript
Unit tests
Add support to fields with object type
Add support to async rule validation
Support filter, such as filter out the unmodified fields, left only modified fields for form submission
Support for third-party rules, such as yup
💡 More ideas…

Contributions are welcomed

Try it online

🚀 slimeform-playground

Install

⚗️ Experimental

SlimeForm only works with Vue 3

Usage

Form state management

Use v-model to bind form[key] on to the <input> element or other components.

status value will be changed corresponded when the form values have been modified. Use the reset function to reset the form values back to its initial states.

<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="<script setup>
import { useForm } from 'slimeform'

const { form, status, reset } = useForm({
// Initial form value
form: () => ({
username: '',
password: '',
}),
})
</script>

<template>
<form @submit.prevent="mySubmit">
<label>

<input v-model="form.username" type="text">
<input v-model="form.password" type="text">
</label>
<button type="submit">Submit</button>
</form>
</template>”>

<script setup>
import { useForm } from ‘slimeform‘

const { form, status, reset } = useForm({
// Initial form value
form: () => ({
username: ‘‘,
password: ‘‘,
}),
})
</script>

<template>
<form @submit.prevent=“mySubmit“>
<label>
<!– here –>
<input v-model=“form.username“ type=“text“>
<input v-model=“form.password“ type=“text“>
</label>
<button type=“submit“>Submit</button>
</form>
</template>