Regleは、Vue.js向けのヘッドレスなフォームバリデーションライブラリです。
Vuelidateの進化版として位置づけられており、タイプセーフでモデルベースの
直感的なAPIが提供されています。
主な特徴：
タイプセーフ:
型安全なバリデーションを記述できます。
すべての型が推論され、開発者に快適な体験を提供します。
モデルベース:
モデルに基づいてバリデーションルールを定義します。
DOMではなく、バリデーションに集中できます。
モジュール式:
必要な機能だけを選んで使用できます。
検証スキーマと検証ルールを拡張できます。
標準スキーマ対応:
標準的なスキーマ(検証)ライブラリもサポートしています。
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),
}
})
スキーマ(検証)ライブラリ連携
(機能的)制限はあるものの標準的な検証ライブラリと連携することもできます。
Zod/Valibot/ArkTypeをサポートしています。
記述例(Zod)：
import { useRegleSchema } from '@regle/schemas';
import { z } from 'zod';
const { r$ } = useRegleSchema({ name: '' }, z.object({
name: z.string().min(1)
}))
Vuelidateからの移行
Vuelidateから容易に移行できるはずです。
他の検証ライブラリ(Vue.js用)との比較
Nuxt
ドキュメント
利用例
自作のWEBアプリ(習作)のフロントエンドで採用しているので、
参考となるはずです。
Discussion