tinyval-vue

基于 tinyval Schema 的 Vue 3 表单状态：用于 v-model 的值、错误、字段是否被访问过、提交、服务端错误和异步检查。

在 Schema 之上约 2 kB gzip，包含所有扩展和组件约 4 kB —— 只打包用到的部分
可以使用 composable（useForm、useField、useFieldArray）或组件（<TvForm>、<TvField>、<TvError>）
在合适的时机显示错误：离开字段后、输入时或提交后
Laravel 的 422 响应会自动分配到各字段
类型：form.values 来自初始值，handleSubmit 中的数据来自 Schema

安装

bash

npm install tinyval tinyval-vue

快速开始

vue

<script setup lang="ts">
import { object, string, pipe, trim, minLength, email } from 'tinyval';
import { useForm } from 'tinyval-vue';

const Signup = object({
  name: pipe(string(), trim(), minLength(2)),
  email: pipe(string(), email()),
});

const form = useForm(Signup, { initial: { name: '', email: '' } });

const submit = form.handleSubmit(async (data) => {
  await api.post('/signup', data); // data: { name: string; email: string }
});
</script>

<template>
  <form @submit="submit">
    <input v-model="form.values.name" @blur="form.touch('name')" />
    <span v-if="form.errors.name">{{ form.errors.name }}</span>

    <input v-model="form.values.email" @blur="form.touch('email')" />
    <span v-if="form.errors.email">{{ form.errors.email }}</span>

    <button :disabled="form.submitting">Sign up</button>
  </form>
</template>

Schema 就是普通的 tinyval Schema：tinyval 文档中的所有规则、错误信息和示例都可以直接用于 useForm。

试一试

试试 taken@mail.ru —— “服务器”会提示它已被占用。

姓名邮箱年龄（选填）密码确认密码

{
  "valid": false,
  "dirty": false,
  "submitted": false,
  "touched": []
}

tinyval-vue ​

安装 ​

快速开始 ​

试一试 ​

延伸阅读 ​

tinyval-vue

安装

快速开始

试一试

延伸阅读