Vue 邮箱的自定义校验

#vue视图==========================
<el-form inline ref="submitForm" :model="email" :rules="rules">
  <el-form-item label="Email" prop="email">
    <el-input v-model="email.email" placeholder="请输入邮箱地址"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit()">提交</el-button>
  </el-form-item>
</el-form>
#data区域===================================

data() {
  return {
    email: {
      email: "",
      code: "",
    },
rules: {
  email: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === "") {
          this.$message.error("邮件地址不能为空");
          return;
        }
        if (
          !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
            value
          )
        ) {
          this.$message.error("邮箱格式不正确");
          return;
        }
        callback();
      },
      trigger: "click",
    },
  ],
},

}

#提交校验============

submit() {
  console.log(this.email);
  this.$refs["submitForm"].validate((valid) => {
    if (!valid) {
      console.log(this.email);
      return;
    }
    //发起请求
    this.post({
      url: 你的url,
      data:this.email
    }).then((result) => {
      this.$message.success(result.msg);
    });
  });
},