How to validate email addresses using vuelidate?

Question

How to validate emails?

Would you please show an example with an error message?

Documentation does not give enough details.

It seems there is nothing like v-if="!$v.user.email.email"

Following code does not work either

validations: {
 user: {
  email: {
        required,
        email: email(),
      },
 }
}

Answer 1

Actualy, I was wrong and there was something like v-if="!$v.user.email.email" You do not need any details for email validator.

All you need is

 email: {
        email,
      },

If you had any Vetur errors just uninstall Vetur and reinstall it.

Vue.use(window.vuelidate.default)
const { email } = window.validators

new Vue({
    el: "#app",
  data: {
    user: {
     email: ""
    }
  },
  validations: {
    user:{
        email: {
          email
        }
    }
  },
  methods: {
    status(validation) {
        return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
})

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.error {
  border-color: red;
  background: #FDD;
}

<script src="https://cdn.jsdelivr.net/combine/npm/vuelidate@0.7.5/dist/validators.min.js,npm/vuelidate@0.7.5/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="$v.user.email.$model" :class="status($v.user.email)">
   <div class="error" v-if="!$v.user.email.email">this must be an email</div>
  <pre>{{ $v }}</pre>
</div>

---

Answer https://stackoverflow.com/a/61359412/11993949 shows off how to use on blur functionality too

Answer 2

you can use this regex validation pattern to validate your email.

 [a-zA-Z0-9]+@[a-z]+\.[a-z]{2,3}

If you are getting as json format you can try this

[a-zA-Z0-9]+@[a-z]+\\.[a-z]{2,}