Vue でフォームの送信と検証を処理する方法

<template>
  <div>
    <form @submit="handleSubmit">
      <input type="text" v-model="name" placeholder="请输入姓名" />
      <input type="email" v-model="email" placeholder="请输入邮箱" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
    };
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault();
      // 在这里处理表单的提交逻辑
    },
  },
};
</script>

<template>
  <div>
    <form @submit="handleSubmit">
      <input type="text" v-model="name" placeholder="请输入姓名" required />
      <span v-if="!validName">请输入有效的姓名</span>
      <input type="email" v-model="email" placeholder="请输入邮箱" required />
      <span v-if="!validEmail">请输入有效的邮箱</span>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      validName: true,
      validEmail: true,
    };
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault();
      // 验证表单输入
      if (this.name === '') {
        this.validName = false;
      } else {
        this.validName = true;
      }
      // 验证email格式
      const emailRegex = /^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]{2,7}$/;
      if (!emailRegex.test(this.email)) {
        this.validEmail = false;
      } else {
        this.validEmail = true;
      }
      // 如果验证通过，进行表单的提交逻辑
      if (this.validName && this.validEmail) {
        // 处理表单提交的逻辑
      }
    },
  },
};
</script>