watch: {
email(value) {
this.email = value;
this.validateEmail(value);
},
},
methods() {
validateEmail() {
// eslint-disable-next-line
if (/^(([^<>()[\]\\.,;:\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,}))$/.test(this.email)) {
this.errmsg.email = ''
} else this.errmsg['email'] = 'Invalid Email Address';
},
<input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" :maxlength="maxemail" @input="validateEmail" />
<button class="submit-button" data-toggle="modal" type="submit" value="Submit" data-target="#exampleModal" :class="isDisabled ? '' : 'selected'" :disabled="isDisabled">Submit</button>
How to implement email validation using watchers in Vuejs? Designed to enable the submit button only when a valid email address is entered.