Rules metadata

Rule validator functions can return more than just a boolean. This additional data can be utilized by your message handler, active handler, or any other part of your application that has access to regle.

Using metadata in createRule

You can use createRule to define your custom rules. Let's explore a real-world example by creating a password strength validator.

strongPassword.ts

import { createRule, Maybe } from '@regle/core';
import { isFilled } from '@regle/rules';
import { passwordStrength, type Options } from 'check-password-strength';

export const strongPassword = createRule({
  validator(value: Maybe<string>, options?: Options<string>) {
    if (isFilled(value)) {
      const result = passwordStrength(value, options);
      return {
        $valid: result.id > 1,
        result,
      };
    }

    return { $valid: true };
  },
  message({ result }) {
    return `Your password is ${result?.value}`;
  },
});

ComponentA.vue

<template>
  <div>
    <input
      v-model="r$.$value.password"
      :class="{ valid: r$.$fields.password.$valid }"
      placeholder="Type your password"
    />

    <button type="button" @click="r$.$resetAll">Reset</button>
  </div>

  <div
    class="password-strength"
    :class="[`level-${r$.$fields.password.$rules.strongPassword.$metadata.result?.id}`]">
  </div>

  <ul v-if="r$.$errors.password.length">
    <li v-for="error of r$.$errors.password" :key="error">
      {{ error }}
    </li>
  </ul>

  <div v-else-if="r$.$fields.password.$valid" class="success">
    Your password is strong enough
  </div>
</template>

<script setup lang="ts">
import { useRegle } from '@regle/core';

const { r$ } = useRegle(
  { password: '' },
  {
    password: {
      strongPassword: strongPassword(),
    },
  }
);
</script>

Result: