zod-arco-rules

中文

Zod / Valibot schemas ➜ Arco Design rules in one line.

Install

# use zod
npm i zod zod-arco-rules

# or use valibot
npm i valibot zod-arco-rules

Quick Start

Composition Api (Recommend)

<script setup lang="ts">
import * as z from 'zod'
import { useForm } from 'zod-arco-rules'
// import { useForm } from 'zod-arco-rules/valibot'

const { rules, form, handleSubmit, reset } = useForm(z.object({
  name: z.string().nonempty(),
  post: z.string().min(2).max(30),
  isRead: z.boolean(),
}))

const onSubmit = handleSubmit((values) => {
  console.log('✅ valid', values)
  reset()
})
</script>

<template>
  <a-form :model="form" :rules @submit="onSubmit">
    <!-- ... -->
  </a-form>
</template>

Manually Usage

<script setup lang="ts">
import * as z from 'zod'
import { arcoRules, handleSubmit } from 'zod-arco-rules'
// import { arcoRules, handleSubmit } from 'zod-arco-rules/valibot'

const rules = arcoRules(z.object({
  name: z.string().nonempty(),
  post: z.string().min(2).max(30),
  isRead: z.boolean(),
}))

const form = ref({
  name: '',
  post: '',
  isRead: false
})

const onSubmit = handleSubmit((values) => {
  // Handle the validated values here
}, { rules })
</script>

<template>
  <a-form :model="form" :rules @submit="onSubmit">
    <!-- ... -->
  </a-form>
</template>

Todos

• Valibot support
• useForm

License

MIT License © 2024-PRESENT Kevin Kwong