Regle Cheat Sheet

Quick reference for common Regle patterns and usage scenarios.

Basic Setup

import {  } from '@regle/core'
import { , ,  } from '@regle/rules'

const {  } = (
  { : '', : '' },        
  {                               
    : { , : (2) },
    : { ,  }
  }
)

Essential Properties

Property	Description	Example
r$.$value	Form data (reactive)	r$.$value.email
r$.$correct	Form is dirty and valid	<button :disabled="!r$.$correct">
r$.$invalid	Form is invalid	v-if="r$.$invalid"
r$.$errors	All error messages	r$.$errors.email
r$.x.$error	Field has errors	v-if="r$.email.$error"
r$.x.$correct	Field is dirty and valid	v-if="r$.email.$correct"
r$.x.$dirty	Field was touched	v-if="r$.email.$dirty"
r$.$validate()	Validate form	await r$.$validate()
r$.$reset()	Reset form	r$.$reset()

Common Rules

import {} from '@regle/core';

const  = <>({})

const {  } = (, {
  // Basic validation
  : { , : (2) },
  : { ,  },
  : { , , : (18, 99) },
  
  // String validation
  : { , , : (3) },
  : {  },
  : { : (500) },
  
  // Custom patterns
  : { : (/^\+?[\d\s-()]+$/) },
  
  // Password confirmation
  : { , : (8) },
  : { 
    , 
    : (() => ..) 
  }
})

Field Patterns

Basic Field with Error Display

<template>
  <div>
    <input v-model="r$.$value.email" type="email" />
    <span v-for="error of r$.email.$errors" class="error">
      {{ error }}
    </span>
  </div>
</template>

Field with Visual States

<template>
  <input 
    v-model="r$.$value.email"
    :class="{
      'error': r$.email.$error,
      'correct': r$.email.$correct,
    }"
  />
</template>

Optional Field with Conditional Validation

import {} from '@regle/core';
import {, , } from '@regle/rules';

const  = ({: ''});

const  = computed(() => (, {
  : {
    // Only required if form have no email
    : (() => !r$.$value.email)
    : (10),
    : (/^\+?[\d\s-()]+$/)
  }
}))

Custom Error Messages

import {  } from '@regle/rules'

const {  } = ({: '', : ''}, {
  : { 
    : (required, 'Email is required'),
    : (email, 'Please enter a valid email address')
  },
  : {
    : (
      minLength(8), 
      ({ : [] }) => `Password must be at least ${} characters`
    )
  }
})

Form Submission

function () {
  // Validate entire form
  const {, } = await .()
  
  if (!) {
    .('Form has errors')
    return
  }
  
  // Submit data
  try {
    await submitForm()
    .() // Reset form after success
  } catch () {
    // Handle submission error
  }
}

Collections (Arrays)

import {} from '@regle/core';

const {  } = (
  { : [{ : '', : '' }] },
  {
    : {
      : {
        : {  },
        : { ,  }
      }
    }
  }
)

// Access array validation
..[0]..

Nested Objects

import {} from '@regle/core';

const {  } = (
  { 
    : { 
      : { : '', : '' },
      : { : '', : '' }
    }
  },
  {
    : {
      : {
        : {  },
        : { : (200) }
      },
      : {
        : { ,  },
        : {  }
      }
    }
  }
)

// Access nested validation
....

Global Configuration

import {  } from '@regle/core';
import { , ,  } from '@regle/rules';


// Set up global defaults
const { :  } = ({
  : () => ({
    : (, 'You need to provide a value'),
    : (, ({ , : [] }) => {
      return `Minimum length is ${}. Current length: ${?.}`;
    })
  }),
  : {
    : true,
  }
})

Schema Integration (Zod)

import {  } from 'zod/v3'
import {  } from '@regle/schemas'

const  = .({
  : .().(2),
  : .().(),
  : .().(18)
})

const {  } = ({
  : '',
  : '',
  : 0
}, )

TypeScript Errors?

import {  } from '@regle/core';
import {  } from '@regle/rules';

const  = ({: ''});

// ✅ Use inferRules for better type inference
const  = (() => {
  return (, {
    : {  }
  })
})