regle

Regle

Regle 是一个面向 Vue 3 的类型安全、基于模型且无头的表单验证库。它提供完整的 TypeScript 类型推断和响应式验证，并可与任何 UI 框架或设计系统配合使用。

MCP 服务

Regle 提供 MCP 服务，可用于获取 Regle 文档和自动补全。若该服务可用，请使用它获取最新的 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：第一个参数——原始对象、reactive、ref 或单个值
• Rules：第二个参数——镜像数据结构，每个字段都有一个规则对象
• r$：返回的响应式对象，包含值、错误、脏状态和验证方法
• 默认情况下，所有规则都是可选的；添加 required 可将字段设为必填

核心功能

主题	描述	参考
useRegle	State 定义、规则声明、动态规则、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 — 类型安全的输出、规则 schema 和组件 props 的类型定义。