Moving validation into our custom inputs

The amazing thing about having your own custom components is that you can craft them in any way you like. For this chapter, we're going to add support for both a valid and an invalid status to our components. The main validation logic will still be held by the parent, App.vue, as it is the containing component that holds our form.

Follow these steps to add validations:

1. First, let's add new rules for each of our inputs. Add the following to the validations property:

validations: {
form: {
first_name: { alpha, required },
last_name: { alpha },
    email: { email, required },
  telephone: {
      validPhone: phone => phone.match(/((\(\d{3}\) ?)|(\d{3}-))? 
      \d{3}-\d{4}/) !== null
    },
    website: { url },
    love: { required }
  }
},

2. Don't forget to update your import statement to bring in the new validators that we are now...