Skip to content

Commit

Permalink
chore: add example about valibot to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Mini-ghost committed Mar 4, 2024
1 parent 1bd2de1 commit 39bda78
Showing 1 changed file with 60 additions and 0 deletions.
60 changes: 60 additions & 0 deletions packages/resolvers/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,65 @@ npm install @vorms/resolvers

## Quickstart

### [Valibot](https://github.com/fabian-hiller/valibot)

The modular and type safe schema library for validating structural data 🤖

```vue
<script setup lang="ts">
import { useForm } from '@vorms/core';
import { valibotResolver } from '@vorms/resolvers/valibot';
import { object, string, minLength } from 'valibot'
const { register, errors, handleSubmit } = useForm({
initialValues: {
account: '',
password: '',
},
validate: valibotResolver(object({
account: string([minLength()]),
password: string([minLength()])
})),
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
});
const { value: account, attrs: accountAttrs } = register('account');
const { value: password, attrs: passwordAttrs } = register('password');
</script>
<template>
<form @submit="handleSubmit">
<div>
<input
v-model="account"
type="text"
placeholder="Account"
v-bind="accountAttrs"
/>
<div v-show="'account' in errors">
{{ errors.account }}
</div>
</div>
<div>
<input
v-model="password"
type="password"
placeholder="Password"
v-bind="passwordAttrs"
/>
<div v-show="'password' in errors">
{{ errors.password }}
</div>
</div>
<div>
<input type="submit" />
</div>
</form>
</template>
```

### [Yup](https://github.com/jquense/yup)

Dead simple Object schema validation
Expand Down Expand Up @@ -126,6 +185,7 @@ const { value: password, attrs: passwordAttrs } = register('password');

## Examples

- [Validate With Valibot](https://stackblitz.com/edit/vorms-validate-with-valibot?file=src%2FApp.vue)
- [Validate With Yup](https://stackblitz.com/edit/vorms-validate-with-yup?file=src%2FApp.vue)
- [Validate With Zod](https://stackblitz.com/edit/vorms-validate-with-zod?file=src%2FApp.vue)

Expand Down

0 comments on commit 39bda78

Please sign in to comment.