使用观察者如何在 Vuejs 中验证 email？

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 中验证 email 地址？ 我正在尝试禁用按钮的功能，直到用户输入有效的 email。

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替换你的isEmailValid

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

Answer 2

在您的情况下（如果我们只谈论 email 验证），正如 Takachi 所说，为此创建计算属性会容易得多。 而且您不需要任何观察者来处理这种情况。

但是，如果您需要更多验证，请使用https://vuelidate.js.org 之类的库，或者只是检查它是如何完成的。