vue实现错误提示

表单验证错误提示

在Vue中实现表单错误提示可以通过v-model和计算属性结合，实时校验输入内容并显示错误信息。以下是一个基础示例：

<template>
  <div>
    <input v-model="email" @blur="validateEmail" placeholder="请输入邮箱">
    <p v-if="error.email" style="color: red">{{ error.email }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      error: {
        email: ''
      }
    }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.email) {
        this.error.email = '邮箱不能为空';
      } else if (!regex.test(this.email)) {
        this.error.email = '请输入有效的邮箱地址';
      } else {
        this.error.email = '';
      }
    }
  }
}
</script>

使用Vuelidate插件

Vuelidate是流行的Vue验证库，提供声明式验证规则：

npm install vuelidate

<template>
  <div>
    <input v-model="$v.email.$model" @blur="$v.email.$touch()">
    <p v-if="$v.email.$error" style="color: red">
      <span v-if="!$v.email.required">邮箱必填</span>
      <span v-if="!$v.email.email">邮箱格式无效</span>
    </p>
  </div>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      email: ''
    }
  },
  validations: {
    email: {
      required,
      email
    }
  }
}
</script>

全局错误处理

对于全局JavaScript错误，可以使用Vue的errorHandler：

Vue.config.errorHandler = function (err, vm, info) {
  console.error(`Error: ${err.toString()}\nInfo: ${info}`);
  // 显示用户友好的错误提示
  showToast('发生错误，请稍后重试');
};

异步请求错误处理

使用axios拦截器统一处理API错误：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login');
    } else {
      const message = error.response.data.message || '请求失败';
      Vue.prototype.$message.error(message);
    }
    return Promise.reject(error);
  }
);

组件级错误边界

Vue 2.6.0+支持错误边界组件：

<template>
  <div v-if="error">
    <p>组件渲染出错</p>
    <button @click="resetError">重试</button>
  </div>
  <slot v-else></slot>
</template>

<script>
export default {
  data: () => ({ error: false }),
  errorCaptured(err, vm, info) {
    this.error = true;
    return false; // 阻止错误继续向上传播
  },
  methods: {
    resetError() {
      this.error = false;
    }
  }
}
</script>

样式优化建议

错误提示样式可以统一管理：

.error-message {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}