使用观察者如何在Vuejs中验证电子邮件

Question

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>

使用观察者如何验证Vuejs中的电子邮件地址？我正在尝试禁用该按钮的功能，直到用户输入有效的电子邮件。

Answer 1

您可以使用计算属性来实现这一点：

computed() {
isEmailValid() {
return '/^(([^<>()[]\.,;: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)
}
}

然后用isEmailValid替换您的isDisabled

在这里工作小提琴：https://jsfiddle.net/u0c98kmL/

Answer 2

在您的情况下(如果我们只谈论电子邮件验证(，将更容易为此创建计算属性，正如Takachi所说。你不需要任何观察者来观察这个案子。

但如果你需要更多的验证，请使用一些类似https://vuelidate.js.org或者只是检查一下是怎么做的。