Regle \ʁɛɡl\ (French word for 'rule' ) is a Typescript first model-based validation library for Vue 3. It's heavily inspired by Vuelidate.
⚠️ Project is still in development, do not use it in production API or function names can still change
TODO
TODO
applyIf
helper (like requiredIf for any validator)pnpm install @regle/core @regle/validators
# or
yarn add @regle/core @regle/validators
# or
npm install @regle/core @regle/validators
<template>
<input v-model="form.email" placeholder="email" />
<ul>
<li v-for="error of errors.email" :key="error">{{ error }}</li>
</ul>
<input v-model="form.password" placeholder="password"/>
<ul>
<li v-for="error of errors.password" :key="error">{{ error }}</li>
</ul>
<input v-model="form.confirmPassword" placeholder="password"/>
<ul>
<li v-for="error of errors.confirmPassword" :key="error">{{ error }}</li>
</ul>
<button type="submit" @click="submit">Submit</button>
</template>
<script setup lang='ts'>
import {useRegle} from '@regle/core';
import {email, required, minLength, sameAs} from '@regle/validators';
type MyForm = {
email?: string,
password?: string,
confirmPassword?: string
}
const form = ref<MyForm>({
email: '',
password: '',
confirmPassword: '',
})
const {$errors, validateForm} = useRegle(form, () => ({
email: {
email,
required,
},
password: {
required,
minLength: minLength(8),
},
confirmPassword: {
required,
sameAs: withMessage(sameAs(() => form.value.password), 'Confirm password must be same as password')
}
}));
function submit() {
const result = await validateForm();
if (result) {
console.log(result.email); // email: string
// ^ type safe form result based on your validators
}
}
</script>
// validations.ts
import {createRule, defineRegleConfig} from '@regle/core';
const myCustomRule = createRule({
type: defineType<string, [foo: string]>('myCustomRule'),
validator(value, foo) {
return value === foo;
},
message: (_, {$params: [foo]}) => `Value is not ${foo}`
})
export const useRegle = defineRegleConfig({
rules: () => ({
maxLength: withMessage(maxLength, (value, { $params: [count] }) => {
return `No no, ${count} is the maximum value`;
}),
myCustomRule
}),
options: {
lazy: true,
}
});
<script setup lang='ts'>
import {useRegle, myCustomRule} from './validations';
const {$errors} = useRegle(..., () => ({
foo: {
myCustomRule: myCustomRule('bar'),
// ^ autocompletes
}
}))
</script>
pnpm install zod @regle/zod
# or
yarn add zod @regle/zod
# or
npm install zod @regle/zod
<script setup lang='ts'>
import {useZodForm} from '@regle/zod';
import {z} from 'zod';
const form = reactive({
email: '',
firstName: '',
})
const {$errors, $regle} = useZodForm(form, z.object({
email: z.string().email({message: 'This must be an email'}).min(1, {message: "This is required"}),
firstName: z.strin().min(1),
}))
</script>
pnpm i
pnpm run test
pnpm run dev
pnpm run build