面试题：Vue表单绑定复杂验证之异步验证与状态管理

实现思路

HTML 部分：创建包含邮箱输入框和验证结果显示区域的表单。
Vue 数据部分：定义用于存储邮箱值、验证状态及验证信息的变量。
验证函数：在输入框失去焦点或表单提交时触发验证函数，该函数设置加载状态，发起异步请求到服务器验证邮箱，根据响应结果更新验证状态和信息。

主要代码结构

HTML 模板

<template>
  <form>
    <label for="email">邮箱:</label>
    <input type="email" id="email" v-model="email" @blur="validateEmail">
    <div v-if="loading">验证中...</div>
    <div v-if="success" style="color: green">邮箱可用</div>
    <div v-if="error" style="color: red">邮箱已存在</div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>

Vue 实例

<script>
export default {
  data() {
    return {
      email: '',
      loading: false,
      success: false,
      error: false
    };
  },
  methods: {
    async validateEmail() {
      this.loading = true;
      this.success = false;
      this.error = false;
      try {
        const response = await fetch(`/api/checkEmail?email=${this.email}`);
        const result = await response.json();
        if (result.exists) {
          this.error = true;
        } else {
          this.success = true;
        }
      } catch (error) {
        console.error('验证邮箱时出错:', error);
      } finally {
        this.loading = false;
      }
    },
    submitForm() {
      if (!this.error) {
        // 表单提交逻辑
      }
    }
  }
};
</script>

服务器端代码示例（假设使用 Node.js 和 Express）

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 模拟数据库查询
const existingEmails = ['test@example.com'];
app.get('/api/checkEmail', (req, res) => {
  const { email } = req.query;
  const exists = existingEmails.includes(email);
  res.json({ exists });
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

星途面试题库

面试题：Vue表单绑定复杂验证之异步验证与状态管理

知识考点

面试题答案

实现思路

主要代码结构