Django with Vue，检测表单验证错误

<template>
  <form @submit.prevent="submitForm">
    <input v-model="email" type="email" name="email" />
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { useForm } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

export default {
  setup() {
    const { handleSubmit, errors } = useForm({
      validationSchema: {
        email: required | email,
      },
    });

    const submitForm = handleSubmit(values => {
      console.log(values);
    });

    return {
      email: '',
      errors,
      submitForm,
    };
  },
};
</script>

# forms.py
from django import forms

class ContactForm(forms.Form):
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_email(self):
        email = self.cleaned_data['email']
        if not email.endswith('@example.com'):
            raise forms.ValidationError("Email must be from example.com domain")
        return email

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from .forms import ContactForm

@require_http_methods(["POST"])
def contact(request):
    form = ContactForm(request.POST)
    if form.is_valid():
        # 处理表单数据
        return JsonResponse({'success': True})
    else:
        return JsonResponse({'errors': form.errors}, status=400)

const submitForm = handleSubmit(values => {
  fetch('/contact/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(values),
  })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        console.log('Form submitted successfully');
      } else {
        // 更新错误信息
        this.errors = data.errors;
      }
    });
});