vue 校验邮箱格式是否正确

Vue.js 中可以使用 vuelidate 或者自定义验证规则来校验邮箱格式是否正确。这里我们以 vuelidate 这一库为例来说明：

1. 首先，你需要安装 `vuelidate` 和它的验证规则插件 `vuelidate-email`：

   npm install vuelidate vuelidate-email

2. 然后，在你的 Vue 组件中引入并配置 vuelidate：

import { createValidator } from 'vuelidate';
import email from 'vuelidate-email';

export default {
  data() {
    return {
      emailInput: '',
    };
  },
  validations: {
    ...createValidator(),
    email: {
      // 使用 email 插件提供的规则
      isEmail: email,
    },
  },
};

3. 在模板中使用 v-model 绑定输入框，并添加 @blur 事件处理函数来触发校验：

<input type="email" v-model="emailInput" @blur="validateEmail">

4. 定义 validateEmail 方法，当输入框失去焦点时检查邮箱格式：

methods: {
  validateEmail() {
    if (!this.$v.email.isEmail(this.emailInput)) {
      this.$v.email.errors.first('isEmail') && console.log('Invalid email format');
      // 显示错误消息或者其他验证失败的处理
    }
  },
},