zod-arco-rules

将 Zod 或 Valibot schema 转换成 Arco Design Vue 表单校验规则 - 写一次 schema，同时得到「类型安全 + 表单校验」

安装

# 使用 Zod
npm i zod zod-arco-rules

# 使用 Valibot
npm i valibot zod-arco-rules

快速上手

组合式 api (推荐)

<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().default('Kevin'),
  post: z.string().min(2).max(30),
  isRead: z.boolean().default(false),
}))

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

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

手动用法（已有表单数据时）

<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

• [x] Valibot support
• [x] useForm

License

MIT License © 2024-PRESENT Kevin Kwong