16.06 Register - Form Validation

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>