Regleは、Vue.js向けのヘッドレスなフォームバリデーションライブラリです。
Vuelidateの進化版として位置づけられており、タイプセーフでモデルベースの直感的なAPIが提供されています。
主な特徴：
タイプセーフ:
型安全なバリデーションを記述できます。
すべての型が推論され、開発者に快適な体験を提供します。
モデルベース:
モデルに基づいてバリデーションルールを定義します。
Viewテンプレートのフォーム要素(やDOM)
ではなく、バリデーションに集中できます。
モジュール式:
必要な機能だけを選んで使用できます。
検証スキーマと検証ルールを拡張できます。
Standard Schema仕様対応:
Standard Schema仕様対応のバリデーション(検証)
ライブラリもサポートしています。
Zod、Valibot、ArkTypeのようなライブラリを使用して、バリデーションをコントロールできます。
RegleはMITライセンスのもとで公開されています。
Vue.jsでのフォームバリデーションにお困りの方にとって、強力な選択肢となるはずです。
Vuelidate同様、Viewテンプレートのフォーム要素とのリンクは任意で、モデルの値のバリデーションを行えます。
VeeValidate etc のViewテンプレートのフォーム要素とのリンクが必須のライブラリより、シンプルにバリデーションまわりのコードを記述できるはずです。
Nuxt3以降用のモジュール(@regle/nuxt)もオフィシャルで提供されています。
※ Vuelidateと異なり、3.3以降 & Composition APIのみサポートしています。
基本的な記述例
<script setup lang='ts'>
import { useRegle } from '@regle/core';
import { required, minLength, email } from '@regle/rules';
const { r$ } = useRegle({ email: '' }, {
email: { required, email, minLength: minLength(4)}
})
<template>
<input
v-model='r$.$value.email'
:class="{ error: r$.$fields.email.$error }"
placeholder='Type your email'
/>
<li v-for="error of r$.$errors.email" :key='error'>
{{ error }}
</li>
</template>
</script>
Vuelidate etcと同じく、基本的なルールはビルトインで用意されています。
カスタムルールの作成
記述例(インライン):
const { r$ } = useRegle({name: ''}, {
name: {
simpleRule: (value) => value === 'regle'
}
})
記述例(createRule)：
export const myRule = createRule({
validator: (value: Maybe<string>, arg: number) => {
return true;
},
message: ({ $params: [arg] }) => {
return 'This field is invalid';
}
});
const {r$} = useRegle({foo: ''}, {
foo: {
myRule: myRule(5),
}
})
Standard Schema仕様対応
(機能的)制限はあるもののStandard Schema仕様対応
バリデーションライブラリと連携することもできます。
Zod/Valibot/ArkTypeをサポートしています。
記述例(Zod)：
import { useRegleSchema } from '@regle/schemas';
import { z } from 'zod';
const { r$ } = useRegleSchema({ name: '' }, z.object({
name: z.string().min(1)
}))
記述例(Valibot)：
import { useRegleSchema } from '@regle/schemas';
import * as v from 'valibot';
const { r$ } = useRegleSchema({ name: '' }, v.object({
name: v.pipe(v.string(), v.minLength(3))
}))
サーバーサイド連携
入力エラーのサーバーサイドでの検証結果を扱うこともできます。
サーバーサイドでの入力エラーの検証結果を
文字列キー＆文字列配列バリューの形にする必要があります、ツリー構造にすることも可能です。
下の記述例では、externalErrorsの型とし汎用型であるRegleExternalErrorTreeを採用していますが、文字列キー＆文字列配列バリューのルールで作成した独自の型を
externalErrorsの型として利用することもできます。
記述例：
import { type RegleExternalErrorTree, useRegle } from '@regle/core'
const form = reactive({
email: '',
name: {
pseudo: '',
},
})
const externalErrors = ref<RegleExternalErrorTree<typeof form>>({});
const { r$ } = useRegle(
form,
{
email: { required },
name: { pseudo: { required } },
},
{
externalErrors,
}
);
async function submit() {
const {valid} = await r$.$validate();
if (valid) {
externalErrors.value = {
email: ["Email already exists"],
name: {
pseudo: ["Pseudo already exists"]
},
}
}
}
Vuelidateからの移行
Vuelidateから容易に移行できるはずです。
他の検証ライブラリ(Vue.js用)との比較
Nuxt
ドキュメント
利用例
自作のWEBアプリのフロントエンドで採用しているので、参考となるはずです。
Discussion