Combine async_validator with @hapi/joi

example.vue

<el-form :model="formModel" :rules="rules" ref="form">
  <el-form-item label="活动名" prop="activity_title">
    <el-input v-model="formModel.activity_title" />
  </el-form-item>
</el-form>

import Joi from "@hapi/joi";
import { validator } from "./validator.js";

export default {
  name: "Demo",
  data() {
    return {
      formModel: {
        activity_title: ""
      },
      rules: {
        activity_title: [validator(Joi.string(), "请填写活动名")]
      }
    }
  },
  methods: {
    submmit() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          // ... do what you want
        } else {
          this.$message.warning("请检查表格")
        }
      })
    }
  }
}

quick_rule.js

function joi2ele(scheme, msg) {
  scheme = scheme.error(new Error(msg));
  return (_, value, callback) => {
    callback(scheme.validate(value, { allowUnknown: true }).error);
  };
}

function validator(scheme, msg, options = { required: true, trigger: "blur" }) {
  return {
    ...options,
    validator: joi2ele(scheme, msg)
  };
}