在 Element Plus 中，表单校验规则可以单独抽离到一个对象中进行统一管理。如果需要实现“值的关联校验”（如密码和确认密码一致、开始时间小于结束时间等），可以通过自定义校验函数实现。

1. 校验规则抽离

export const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    // 关联校验在下面
  ]
};

2. 实现值的关联校验

以“密码”和“确认密码”一致为例：

export const formRules = (form) => ({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

3. 在组件中使用

<script setup>
import { reactive, ref } from 'vue';
import { formRules } from '@/rules/formRules.js';

const form = reactive({
  username: '',
  password: '',
  confirmPassword: ''
});

const rules = formRules(form);
</script>

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" type="password" />
    </el-form-item>
    <el-button @click="submit">提交</el-button>
  </el-form>
</template>

4. 总结

• 校验规则可以单独抽离成模块。
• 关联校验通过自定义 validator，并传入整个表单对象实现。
• 只要在 validator 里能访问到其他字段的值，就能实现各种关联校验。

如需更多复杂校验，可继续扩展 validator 函数逻辑。