screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h3>Vue Js Name Validate </h3> <div id="app"> <form @submit.prevent="validateForm"> <div> <label for="first-name">First Name:</label> <input type="text" id="first-name" v-model="firstName" /> <pre v-if="errors.firstName" class="error">{{ errors.firstName }}</pre> </div> <br> <div> <label for="last-name">Last Name:</label> <input type="text" id="last-name" v-model="lastName" /> <pre v-if="errors.lastName" class="error">{{ errors.lastName }}</pre> </div> <button type="submit">Submit</button> </form> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { firstName: '', lastName: '', errors: {} }; }, methods: { validateForm() { this.errors = {}; if (!this.firstName) { this.errors.firstName = 'First name is required'; } else if (this.firstName.length < 2) { this.errors.firstName = 'First name must be at least 2 characters long'; } else if (!/^[a-zA-Z]+$/.test(this.firstName)) { this.errors.firstName = 'First name can only contain letters'; } if (!this.lastName) { this.errors.lastName = 'Last name is required'; } else if (this.lastName.length < 2) { this.errors.lastName = 'Last name must be at least 2 characters long'; } else if (!/^[a-zA-Z]+$/.test(this.lastName)) { this.errors.lastName = 'Last name can only contain letters'; } } } }) </script> <style> .error { color: red; } </style> </body> </html>