vue3 el-from表单效验，调用接口进行验证

在 Vue 3 中，你可以使用 el-form 表单进行单个字段的验证，并且可以在其中一个字段的验证中调用接口进行验证。

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item label="用户名" prop="username" :rules="getUsernameRules">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="validateForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessageBox } from 'element-plus';

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  setup() {
    const formData = reactive({
      username: ''
    });

    const formRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ]
    };

    // 获取用户名的规则，包括调用接口的验证规则
    const getUsernameRules = ref([...formRules.username]);

    // 调用接口进行验证的函数
    const validateUsername = async (rule, value) => {
      try {
        // 调用接口进行验证
        const response = await yourApi.validateUsername(value);
        if (response.data.valid) {
          // 用户名有效，通过验证
          return true;
        } else {
          // 用户名无效，验证不通过
          return Promise.reject('用户名已存在');
        }
      } catch (error) {
        // 处理接口调用错误
        return Promise.reject('验证失败');
      }
    };

    // 在用户名规则中添加调用接口的验证规则
    getUsernameRules.value.push({ validator: validateUsername, trigger: 'blur' });

    const validateForm = () => {
      // 验证表单
      const form = ref.value;
      form.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
          // ...
        } else {
          // 表单验证不通过，显示错误消息
          ElMessageBox.alert('表单验证不通过', '提示');
        }
      });
    };

    return {
      formData,
      formRules,
      getUsernameRules,
      validateForm
    };
  }
};
</script>

在上述代码中，我们使用了 el-form 组件来创建表单，并使用 el-input 来输入用户名。我们在 formRules 中定义了用户名的验证规则，其中包括 required 规则和一个自定义的验证规则。

为了在验证规则中调用接口进行验证，我们创建了一个名为 validateUsername 的异步函数，它会调用接口进行用户名验证。然后，我们将这个函数作为验证规则的一个选项，添加到了 getUsernameRules 中。

最后，在验证表单时，我们调用了 form.validate 方法，并根据验证结果进行相应的处理。