From 1a10b0c9c76f2c4eae62f76c2c3e3087663a2a79 Mon Sep 17 00:00:00 2001
From: "Fredrick W. Warren" <fred.warren@gmail.com>
Date: Fri, 12 Feb 2021 13:40:26 -0800
Subject: [PATCH] 16.06 Register - Form Validation

---
 src/components/Auth/Register.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Auth/Register.vue b/src/components/Auth/Register.vue
index 57fdf9f..9222185 100644
--- a/src/components/Auth/Register.vue
+++ b/src/components/Auth/Register.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-form>
+  <q-form @submit="submitForm" @reset="resetForm">
     <div class="row q-mb-md">
       <q-banner class="bg-grey-3 col">
       <template v-slot:avatar>
@@ -11,6 +11,8 @@
     <div class="row q-mb-md">
       <q-input
         v-model="formData.email"
+        :rules="[ val => isValidEmailAddress(val) || 'Please enter a valid email address' ]"
+        lazy-rules
         outlined
         class="col"
         label="Email"
@@ -20,6 +22,8 @@
     <div class="row q-mb-md">
       <q-input
         v-model="formData.password"
+        :rules="[ val => val.length >= 6 || 'Please enter at least 6 characters' ]"
+        lazy-rules
         type="password"
         outlined
         class="col"
@@ -30,6 +34,7 @@
     <div class="row q-mb-md">
       <q-space />
       <q-btn
+        type="submit"
         color="primary"
         label="Register"
       />
@@ -46,6 +51,17 @@ export default {
         password: ''
       }
     }
+  },
+  methods: {
+    isValidEmailAddress (email) {
+      const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+      return re.test(String(email).toLowerCase())
+    },
+    resetForm () {
+    },
+    submitForm () {
+      console.log('Bang Bang! My baby shot me down')
+    }
   }
 }
 </script>