screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css"> </head> <body> <div id="app"> <v-app> <v-container> <h3>Vuetify Validate Email Address</h3> <v-form @submit.prevent="submitForm"> <v-alert v-if="feedback" :type="feedback.type">{{ feedback.message }}</v-alert> <v-text-field v-model="email" label="Email"></v-text-field> <v-btn type="submit" color="success" label="Submit">Submit</v-btn> </v-form> </v-container> </v-app> </div> <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script> <script type="module"> const { createApp } = Vue; const { createVuetify } = Vuetify; const vuetify = createVuetify(); createApp({ data() { return { email: "", feedback: null, }; }, computed: { emailError() { return !this.email ? ["Email is required"] : this.email.match(/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/) ? [] : ["Invalid email format"]; }, }, methods: { submitForm() { this.feedback = !this.emailError.length ? { type: 'success', message: 'Email is valid.' } : { type: 'error', message: this.emailError[0] }; }, }, }) .use(vuetify) .mount('#app'); </script> </body> </html>