在Vue3+TypeScript+Element-plus项目中，可以使用Element-plus提供的表单校验功能来实现表单校验。以下是一个示例，展示如何实现表单校验和自定义校验。 首先，确保你已经安装了Element-plus和相关的依赖： 

npm install element-plus --save
npm install @vue/compiler-sfc --save-dev

接下来，创建一个表单组件，例如

Form.vue

<template>
  <el-form
    :model="form"
    :rules="rules"
    ref="form"
    label-width="100px"
    style="max-width: 400px; margin: 0 auto;"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

export default defineComponent({
  name: 'Form',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const form = ref({
      username: '',
      password: '',
    });

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
      ],
    };

    const submitForm = () => {
      const formRef = (this.$refs.form as any);
      formRef.validate((valid: boolean) => {
        if (valid) {
          // 校验通过，执行提交逻辑
          console.log('提交表单');
        } else {
          // 校验不通过，提示错误信息
          console.log('表单校验失败');
        }
      });
    };

    return {
      form,
      rules,
      submitForm,
    };
  },
});
</script>

在上述代码中，我们使用了Element-plus提供的 ElForm、ElFormItem 、ElInput 和ElButton 组件来构建表单。在setup 函数中，我们定义了form rules变量，并通过ref 函数进行了响应式处理。rules 对象定义了每个字段的校验规则。在submitForm 方法中，我们通过this.$refs.form 获取到表单的引用，并调用validate 方法进行表单校验。校验结果会通过回调函数的参数返回，如果校验通过，我们可以执行提交逻辑，否则提示校验失败。

可以通过自定义校验器来实现自定义校验。以下是一个示例，展示如何实现自定义校验。 在 

rules

对象中，我们可以为每个字段定义一个校验规则数组。每个校验规则对象中包含了required 、validator、message 、trigger 等属性，其中validator 属性可以指定一个自定义的校验函数。

例如，在上述示例中，我们可以在rules 对象中为username 字段添加一个自定义校验函数：

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' },
    { validator: validateUsername, message: '用户名已存在', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
  ],
};

const validateUsername = (rule: any, value: string, callback: any) => {
  // 这里可以编写自定义的校验逻辑
  if (value === 'admin') {
    callback(new Error('用户名已存在'));
  } else {
    callback();
  }
};

在上述代码中，我们为username 字段添加了一个自定义校验函数validateUsername ，该函数接收三个参数。

rule