Vuelidate の後継 Regle

ここから先はミラーです。

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アプリのフロントエンドで採用しているので、参考となるはずです。