当前位置：首页 > news >正文

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

news 来源：原创 2025/6/12 19:08:32

现代前端应用中，表单交互是用户体验的重要组成部分。而表单验证作为其中的核心环节，不仅需要前端的即时反馈，还需要与后端接口联动进行数据合法性校验。本文将详细介绍如何在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>