regle

Regle

Regle は、Vue 3 向けの型安全でモデルベースのヘッドレスフォーム検証ライブラリです。完全な TypeScript 推論とリアクティブな検証を提供し、あらゆる UI フレームワークやデザインシステムで動作します。

MCP サーバー

Regle は、Regle のドキュメントやオートコンプリートを利用できる MCP サーバーを提供しています。利用できる場合は、API の最新情報を取得するために使用してください。

{
  "mcpServers": {
    "regle": {
      "command": "npx",
      "args": ["@regle/mcp-server"]
    }
  }
}

## Installation

```sh
# Core + built-in rules
pnpm add @regle/core @regle/rules

# Optional: schema support (Zod, Valibot, ArkType)
pnpm add @regle/schemas

Vue 3.3 以降と TypeScript 5.1 以降が必要です。

クイックスタート

import { useRegle } from '@regle/core';
import { required, email, minLength } from '@regle/rules';

const { r$ } = useRegle(
  { name: '', email: '' },
  {
    name: { required, minLength: minLength(3) },
    email: { required, email },
  }
);

<template>
  <input v-model="r$.$value.name" placeholder="Name" />
  <ul v-if="r$.$errors.name.length">
    <li v-for="error of r$.$errors.name" :key="error">{{ error }}</li>
  </ul>

  <button @click="r$.$validate()">Submit</button>
</template>

主な概念

• State：第 1 引数。生のオブジェクト、reactive、ref、または単一の値です
• Rules：第 2 引数。データ構造を反映し、各フィールドにルールオブジェクトを設定します
• r$：値、エラー、変更状態、検証メソッドを含む、返されるリアクティブオブジェクトです
• すべてのルールはデフォルトで任意です。フィールドを必須にするには required を追加します

コア機能

トピック	説明	リファレンス
useRegle	状態の定義、ルールの宣言、動的なルール、r$ オブジェクト	core-use-regle
検証プロパティ	$invalid、$dirty、$error、$errors、$pending、$validate、$touch、$reset	core-validation-properties
エラーの表示	エラーの表示、カスタムメッセージ、getErrors、flatErrors	core-displaying-errors
修飾子	autoDirty、lazy、silent、rewardEarly、disabled、validationGroups、フィールドごとの修飾子	core-modifiers

関連スキル

• regle-rules — 組み込みルール、カスタムルール（createRule）、ルールラッパー（withMessage、withParams、withAsync）、ルール演算子（and、or、applyIf、assignIf）。
• regle-advanced — コレクション、非同期処理、サーバーエラー、リセット、スコープ付き検証、バリアント、グローバル設定。
• regle-schemas — Zod、Valibot、ArkType、Standard Schema との統合。
• regle-typescript — 型安全な出力、ルールスキーマとコンポーネントのプロパティの型付け。