Quasar Form Validation Rules Builder

Pick the checks a QInput needs, set the values and messages, and copy a working rules array. Try every rule in a live field before you paste it.

Start from
Rules
They run top to bottom and only the first failing rule shows its message. Every rule except Required passes an empty value, so the field can stay optional.
Required
Fails on an empty or whitespace-only value.
Email
Quasar's built-in email pattern, wrapped so it fails with a message.
Regex pattern
The value must match a regular expression.
Minimum length
At least this many characters.
Maximum length
At most this many characters.
Match another field
Equal to another field, like confirm password.
Async uniqueness check
Asks a server whether the value is taken. The field shows a spinner while it waits.
import { ref } from 'vue'
import type { ValidationRule } from 'quasar'

const username = ref('')

// Stub that answers like a server: replace the body with a request to your API.
async function isUsernameAvailable(val: string) {
  if (!val) return true
  await new Promise(resolve => setTimeout(resolve, 500))
  const taken = ['admin', 'quasar']
  return !taken.includes(val.trim().toLowerCase()) || 'That username is taken'
}

const usernameRules: ValidationRule<string>[] = [
  val => !!val?.trim() || 'Username is required',
  val => !val || /^[A-Za-z0-9_]+$/.test(val) || 'Use letters, numbers and underscores only',
  val => !val || val.length >= 3 || 'Use at least 3 characters',
  val => !val || val.length <= 20 || 'Use at most 20 characters',
  isUsernameAvailable,
]
Paste it into the <script setup> of the component that holds the field, then bind it with :rules="usernameRules".
When the rules run
Try it
A real QInput with these rules and settings.

How to use the Quasar Form Validation Rules Builder

  1. Start from a preset such as Username, Email or Confirm password, or type your own field label and pick the input type.
  2. Turn on the rules the field needs and set their values: a length, a regex, a number range or the field to match.
  3. Edit the error messages. Placeholders like {min} and {label} are filled in for you.
  4. Choose when the rules run with lazy-rules, and turn on reactive-rules only if a rule reads another field.
  5. Type into the Try it field to check every message, then copy the rules array, the q-input or the complete component.

Need the form around the field? Browse ready-made Quasar components for sign-in, registration and settings forms.

Frequently asked questions