regle

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Regle

Regle is a type-safe, model-based, headless form validation library for Vue 3. It provides full TypeScript inference, reactive validation, and works with any UI framework or design system.

Regle是一款为Vue 3打造的类型安全、基于模型的无头表单验证库。它提供完整的TypeScript类型推断、响应式验证功能，且可与任意UI框架或设计系统配合使用。

MCP Server

Regle provides an MCP server that can be used to get documentation and autocomplete for Regle. If it's available, use it to get up-to-date information on the API.

json

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

Regle提供了一个MCP服务器，可用于获取Regle的文档和自动补全功能。如果可用，建议使用它来获取最新的API相关信息。

json

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

Installation

安装

undefined

undefined

Core + built-in rules

pnpm add @regle/core @regle/rules

Optional: schema support (Zod, Valibot, ArkType)

pnpm add @regle/schemas


Requires Vue 3.3+ and TypeScript 5.1+.

pnpm add @regle/schemas


要求Vue 3.3+及TypeScript 5.1+版本。

Quick Start

快速开始

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 },
  }
);

vue

<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>

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 },
  }
);

vue

<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>

Key Concepts

核心概念

State: first argument -- raw object,
```
reactive
```
,
```
ref
```
, or single value
Rules: second argument -- mirrors the data structure, each field gets a rules object
r$
: returned reactive object with values, errors, dirty state, and validation methods
All rules are optional by default; add
```
required
```
to enforce a field

状态：第一个参数——原始对象、
```
reactive
```
、
```
ref
```
或单个值
规则：第二个参数——与数据结构一一对应，每个字段对应一个规则对象
r$
：返回的响应式对象，包含值、错误信息、脏状态及验证方法
默认情况下所有规则都是可选的；若要强制字段必填，需添加
```
required
```
规则

Core

核心功能

Topic	Description	Reference
useRegle	State definition, rules declaration, dynamic rules, `r$` object	core-use-regle
Built-in Rules	All validation rules from `@regle/rules`	core-built-in-rules
Validation Properties	`$invalid` , `$dirty` , `$error` , `$errors` , `$pending` , `$validate` , `$touch` , `$reset`	core-validation-properties
Displaying Errors	Showing errors, custom messages, `getErrors` , `flatErrors`	core-displaying-errors
Modifiers	`autoDirty` , `lazy` , `silent` , `rewardEarly` , `validationGroups` , per-field modifiers	core-modifiers

主题	描述	参考
useRegle	状态定义、规则声明、动态规则、 `r$` 对象	core-use-regle
内置规则	来自 `@regle/rules` 的所有验证规则	core-built-in-rules
验证属性	`$invalid` 、 `$dirty` 、 `$error` 、 `$errors` 、 `$pending` 、 `$validate` 、 `$touch` 、 `$reset`	core-validation-properties
错误展示	错误显示、自定义提示信息、 `getErrors` 、 `flatErrors`	core-displaying-errors
修饰符	`autoDirty` 、 `lazy` 、 `silent` 、 `rewardEarly` 、 `validationGroups` 、字段级修饰符	core-modifiers

Rules

规则相关

Topic	Description	Reference
Custom Rules	Inline rules, `createRule` , reactive parameters, async rules, metadata	core-custom-rules
Rule Wrappers	`withMessage` , `withParams` , `withAsync` , `withTooltip` , chaining	core-rule-wrappers
Rule Operators	`and` , `or` , `xor` , `not` , `applyIf` , `assignIf` , `pipe`	core-rule-operators

主题	描述	参考
自定义规则	内联规则、 `createRule` 、响应式参数、异步规则、元数据	core-custom-rules
规则包装器	`withMessage` 、 `withParams` 、 `withAsync` 、 `withTooltip` 、链式调用	core-rule-wrappers
规则操作符	`and` 、 `or` 、 `xor` 、 `not` 、 `applyIf` 、 `assignIf` 、 `pipe`	core-rule-operators