Building Applications with Spring 5 and Vue.js 2

Validate form data with Vuelidate

Essentially, Vuelidate is a Vue mixin. We need to apply it to Vue first. To do that, we make changes to the frontend/src/main.js file, as follows:

import Vuelidate from 'vuelidate'...Vue.use(Vuelidate)

And the following are the changes we make to RegisterPage.vue:

<script>import { required, email, minLength, maxLength, alphaNum } from 'vuelidate/lib/validators'...export default {  ...  validations: {    form: {      username: {        required,        minLength: minLength(2),        maxLength: maxLength(50),        alphaNum      },      emailAddress: {        required,        email,        maxLength: maxLength(100)      },      password: {        required,        minLength: minLength(6),        maxLength: maxLength(30)      }    }  },  methods: {    submitForm () {      this.$v.$touch()      if (this.$v.$invalid) {        return      }