vue3 elementplus 表单自定义规则检验

在 Vue 3 中使用 Element Plus 表单进行自定义规则检验可以通过以下步骤来完成：

1. 在组件中引入需要使用的 Element Plus 组件和验证规则。

import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import { defineComponent, ref } from 'vue';
import { required, email } from 'element-plus/es/utils/validate';

2. 在模板中使用 Element Plus 表单组件和表单项组件。

<template>
  <el-form :model="form" ref="form" :rules="rules" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

3. 在组件中定义表单数据和验证规则。

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

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { validator: emailValidator, trigger: 'blur' }
      ]
    };

    // 自定义邮箱验证规则
    const emailValidator = (rule, value, callback) => {
      if (value && !email(value)) {
        callback(new Error('请输入正确的邮箱地址'));
      } else {
        callback();
      }
    };

    const submitForm = () => {
      const formRef = refs.form;
      formRef.validate((valid) => {
        if (valid) {
          // 验证通过
        } else {
          // 验证不通过
        }
      });
    };

    return {
      form,
      rules,
      submitForm
    };
  }
});

在以上代码中，我们使用了 Element Plus 中自带的 `required` 和 `email` 验证规则，并且自定义了邮箱验证规则 `emailValidator`。在 `submitForm` 方法中调用 `formRef.validate` 方法来验证表单数据是否符合要求。如果验证通过，执行相应的操作；否则，提示用户错误信息。

这就是使用 Vue 3 和 Element Plus 进行表单自定义规则检验的基本流程。