Full-Stack Web Development with Vue.js and Node

Building Authentication with passport.js Chapter 6

v => !!v || 'E-mail is required',

v => /\S+@\S+\.\S+/.test(v) || 'E-mail must be valid',

],

}),

methods: {

async submit() {

if (this.$refs.form.validate()) {

// add process here

}

},

clear() {

this.$refs.form.reset();

},

},

};

</script>

We have also added some validations for the registration form here. It validates the email
provided by the user according to the given regex.

We have added two methods, submit and clear. The clear method resets the form

values; pretty straightforward, right? Now, when we click on the submit button, the

validations are run first. If all the validations pass, then only the logic inside the submit

method is processed. Here, we need to make a request to the server with the user
parameters where axios comes into play.

Introducing axios

The axios is a mechanism to send request data to the server. You can think of it as an AJAX

request in JavaScript. With axios, we can handle success and error responses from the

server effectively.

To install axios, run the following command:

$ npm install axios --save

Using axios

Now, let's modify our Register.vue file to implement axios—replace the content inside

the script tag as follows:

...

</v-form>