用户体验升级：表单失焦调用接口验证，错误信息即时可视化

现代前端应用中，表单交互是用户体验的重要组成部分。而表单验证作为其中的核心环节，不仅需要前端的即时反馈，还需要与后端接口联动进行数据合法性校验。本文将详细介绍如何在Vue3中实现表单输入与接口验证的无缝联动，并优雅地展示错误提示信息。
一个完整的验证流程应该是：用户输入 → 即时反馈 → 失焦触发接口验证 → 提交前汇总所有错误 → 统一提示。
基础实现：表单与接口的联动验证
下面是一个基于Vue3+Element Plus的完整实现示例，展示了如何在失焦时调用接口验证并显示错误信息：

<script setup lang="ts">
import { ref, reactive } from 'vue'

  const errorInfo = ref(''); // 保存错误信息
  const validateSubjectId = (rule: any, value: any, callback: any) => {
    if(!value) {
        callback(new Error('请输入科目编号'));
    } else if (errorInfo.value) {
        callback(new Error(errorInfo.value));
    } else {
        callback();
    }
};
  
  const formRef = ref()
  const form = ref({
    name: '',
    subjectId: '',
  })

  const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    subjectId: [
      { required: true, message: '请输入科目编号', trigger: 'blur'},
      // 点击保存时，调用该验证。接口调用为异步，该方法不执行
      { validator: validateSubjectId, trigger: 'blur'} 
    ]
  })

  // 判断是否合法
  const getISValid = () => {
    // 实际开发，根据后端返回值进行判断，这里通过是否可以整除2进行代替
     setTimeout(() => {
      const randomInt = Math.floor(Math.random() * 11);
      errorInfo.value =  randomInt % 2 ? '' : '输入不合法'
     })
    // 接口调用
     if (!success) {
       // 如果返回错误，保存错误信息 配合表单 error属性显示错误信息
          errorInfo.value = msg;
      } else {
          errorInfo.value = '';
      }
  }
  
  const save = () => {
    formRef.value?.validate()
  }

</script>
<template>
  <el-form label-width="120px" ref="formRef" :model="form" :rules="rules">
    <el-form-item label="姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"/>
    </el-form-item>
     <el-form-item label="科目编号：" prop="subjectId" :error="errorInfo">
        <el-input v-model="form.subjectId" placeholder="请输入科目编号" @blur="getISValid"/>
    </el-form-item>
    <el-form-item>
      <el-button>取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form-item>
  </el-form>
</template>

效果展示如下：

错误信息位置：
使用el-form-item的:error属性同时控制边框颜色和错误提示
前后端验证统一：
将前端规则和后端接口验证集成到同一套流程中

如果有更好的解决方案，欢迎在评论区留言分享。