Vue High Validator

A Vue 3 plugin for form validation with Persian-specific validators like required, required_if,integer,nullable, email, Jalali date, national code, etc.

Installation

Features

• 🌟 Simple: Intuitive and straightforward declarative validation
• 🧘‍♀️ Versatile: Supports synchronous, asynchronous, field-level, or form-level validation
• ⚡️ Speedy: Create forms quickly with a lightweight and easy-to-use API
• 🎯 Lightweight: Focuses only on complex form logic, giving you full control over the rest

npm install vue-high-validator

Development

npm install
npm run dev

Playground روی http://localhost:5173 اجرا می‌شود. برای ساخت خروجی کتابخانه:

npm run build

<script setup>
import { useValidator, useForm, validators } from 'vue-high-validator';

const form = useForm({
  name: '',
  email: '',
});

const { hasValid } = useValidator(form.value, {
  name: 'required',
  email: 'required|email',
});

if (hasValid()) {
  console.log('Form is valid!');
}
</script>
<template>
  <div>
    <input v-model="form.name.value" />
    <span v-if="form.name.hasInvalid">{{ form.name.errorMessage }}</span>
  </div>
</template>

Locale

پیام‌های خطا به‌صورت پیش‌فرض فارسی هستند. برای انگلیسی یا هر زبان دیگر:

import { setLocale, addLocale, useValidator } from 'vue-high-validator'

setLocale('en')

addLocale('de', {
  required: 'Dieses Feld ist erforderlich',
  email: 'Ungültige E-Mail-Adresse',
  mobile: 'Ungültige Mobilnummer',
})

setLocale('de')

یا فقط برای یک فرم:

useValidator(form.value, {
  name: 'required',
  email: 'required|email',
}, {
  locale: 'en',
  messages: {
    required: 'Please fill this field',
    email: 'Enter a valid email',
  },
})