How can I implement user input validation in Vue 3?

How can I implement user input validation in Vue 3?

You can use the built-in validation features of Vue 3 or libraries like Vuelidate or VeeValidate. What specific validation do you need?

I want to validate an email input field.

You can use a regex pattern to validate the email format. Here's a simple example:

data() {
  return {
    email: '',
    emailError: ''
  };
},
methods: {
  validateEmail() {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    this.emailError = pattern.test(this.email) ? '' : 'Invalid email address';
  }
}

Would you like to see how to integrate this into a form?

Yes, please show me how to integrate it into a form.

Sure! Here’s a simple form example:

<template>
  <form @submit.prevent="validateEmail">
    <input type="email" v-model="email" @blur="validateEmail" />
    <span>{{ emailError }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

This will validate the email when the input loses focus and display an error message if it's invalid.