16.06 Register - Form Validation

This commit is contained in:
Fredrick W. Warren 2021-02-12 13:40:26 -08:00
parent 9bb3248291
commit 1a10b0c9c7

View File

@ -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>