How to Validate Different OTP Input Types in Vue 3: A Complete Guide

The vue3-otp-input component validates OTP characters automatically based on the input-type prop, applying regex filters on paste and keyboard restrictions to ensure only allowed characters are entered.

When building secure authentication flows in Vue 3, validating different OTP input types—such as numeric codes, alphanumeric tokens, or masked passwords—requires careful handling of both paste operations and keystroke filtering. The ejirocodes/vue3-otp-input library implements this validation internally through the input-type prop, letting you enforce constraints without writing custom validation logic.

Supported Input Types and Validation Rules

The component supports four distinct input types, each with specific validation behavior defined in src/components/vue3-otp-input.vue and src/components/single-otp-input.vue.

Number (Digits Only)

When input-type="number", the component restricts input to digits 0-9.

• Paste validation: The handler in vue3-otp-input.vue checks the clipboard content against the regex /^\d+$/ and rejects the paste if it contains non-numeric characters.
• Keyboard validation: The handleOnKeyDown method in single-otp-input.vue blocks keys that are not digits or control characters (Backspace, Delete, Arrows, etc.).

Letter-Numeric (Alphanumeric)

When input-type="letter-numeric", the component accepts both letters and numbers.

• Paste validation: Uses the regex /^\w+$/ to verify that pasted content contains only word characters (A-Z, a-z, 0-9, underscore).
• Keyboard validation: Permits letter keys and numeric keys while filtering out symbols.

Tel (Default)

When input-type="tel" (the default), the component imposes no character restrictions.

• Validation: No regex filtering is applied during paste operations.
• Behavior: Only the length of each input field is limited. This mode is useful for generic PINs that might include symbols or spaces.

Password (Masked Input)

When input-type="password", the component masks the entered characters while following the same validation rules as tel.

• HTML type: The computed property inputTypeValue in single-otp-input.vue maps the prop value to the HTML attribute type="password", rendering dots or asterisks instead of characters.
• Validation: No character restrictions are enforced, identical to tel mode.

Implementation Examples for Each Input Type

Below are practical implementations demonstrating how to configure the input-type prop for different validation scenarios.

Numeric OTP (6-Digit Code)

<template>
  <v-otp-input
    v-model:value="otpCode"
    :num-inputs="6"
    input-type="number"
    @on-complete="handleComplete"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VOtpInput from 'vue3-otp-input';

const otpCode = ref('');
const handleComplete = (value: string) => {
  console.log('Numeric OTP completed:', value);
};
</script>

Alphanumeric OTP (5-Character Token)

<template>
  <v-otp-input
    v-model:value="token"
    :num-inputs="5"
    input-type="letter-numeric"
    @on-complete="verifyToken"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
const token = ref('');

const verifyToken = (val: string) => {
  // Token contains only letters and numbers
  console.log('Alphanumeric token:', val);
};
</script>

Password-Masked Input

<template>
  <v-otp-input
    v-model:value="secureCode"
    :num-inputs="4"
    input-type="password"
    @on-complete="submitSecure"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
const secureCode = ref('');

const submitSecure = (val: string) => {
  console.log('Masked code entered');
};
</script>

How Validation Works Under the Hood

Understanding the internal mechanics helps you debug validation issues and extend the component if needed.

Paste Validation Logic

The wrapper component src/components/vue3-otp-input.vue handles clipboard operations. When a user pastes content, the component checks the string against type-specific regex patterns:

• For number: /^\d+$/ ensures only digits
• For letter-numeric: /^\w+$/ ensures word characters only

If the pasted content fails the regex test, the paste event is rejected and the input fields remain unchanged.

Keyboard Input Filtering

Individual input fields are managed by src/components/single-otp-input.vue. The handleOnKeyDown method (lines 85-91) implements keyboard-level validation by checking the key code before allowing the character to appear:

• Numeric mode: Blocks keys that are not digits (0-9) or control keys
• Letter-numeric mode: Allows letters (A-Z, a-z) and digits
• Tel/Password modes: Permits any printable character

This two-layer validation (paste + keyboard) ensures that invalid characters never enter the OTP fields, providing immediate feedback to users.

Input Type Mapping

The computed property inputTypeValue in single-otp-input.vue translates the abstract input-type prop into concrete HTML attributes:

• password maps to type="password" for masking
• Other types map to their corresponding HTML input types or default to text behavior

This mapping occurs at lines 5-9 of the single field component.

Summary

• Use input-type="number" to restrict OTP entry to digits only; the component validates using /^\d+$/ on paste and filters non-numeric keystrokes.
• Use input-type="letter-numeric" for alphanumeric codes; validation uses /^\w+$/ to ensure only letters and numbers are accepted.
• Use input-type="tel" (default) when you need no character restrictions, only length limits.
• Use input-type="password" to mask characters visually while maintaining the same validation rules as tel.
• Validation occurs in two stages: paste handling in vue3-otp-input.vue and keyboard filtering in single-otp-input.vue.

Frequently Asked Questions

What happens if a user pastes invalid characters into a numeric OTP field?

The component rejects the entire paste operation. In src/components/vue3-otp-input.vue, the paste handler tests the clipboard content against the regex /^\d+$/ when input-type="number". If the test fails, the event is prevented and the input fields remain unchanged, ensuring only valid digits enter the field.

Can I use special characters like dashes or spaces in the OTP?

Only when using input-type="tel" or input-type="password". These modes do not apply regex filters to pasted content or keystrokes, allowing any characters including dashes, spaces, or symbols. The number and letter-numeric types explicitly block special characters through regex validation (/^\d+$/ and /^\w+$/ respectively).

How does the password input type differ from tel in terms of validation?

There is no difference in validation logic. Both password and tel accept any character without regex filtering. The distinction lies in the HTML rendering: single-otp-input.vue computes inputTypeValue to apply type="password" to the underlying input element, which masks the characters visually while maintaining the permissive validation rules of tel mode.

Is it possible to change the input type dynamically after the component mounts?

Yes, the input-type prop is reactive. Changing the prop value updates the validation rules immediately because vue3-otp-input.vue and single-otp-input.vue reference the prop directly in their paste handlers and keydown listeners. However, existing values in the input fields are not retroactively validated; only new keystrokes and paste operations will follow the updated rules.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}