Vue开发经验分享：如何处理复杂的表单验证

<template>
  <div>
    <label for="username">用户名：</label>
    <input id="username" v-model="username">
    <span v-if="!username">用户名不能为空</span>
    <span v-else-if="!validateEmail(username)">请输入正确的邮箱格式</span>

    <label for="password">密码：</label>
    <input id="password" type="password" v-model="password">
    <span v-if="!password">密码不能为空</span>
    <span v-else-if="password.length < 6 || password.length > 12">密码长度必须在6-12位之间</span>

    <button @click="submit">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      isUsernameExist: false
    }
  },
  methods: {
    validateEmail(email) {
      // 使用正则表达式验证邮箱格式
      // 返回true或false
    },
    async checkUsernameExist(username) {
      // 调用后端接口验证用户名是否已存在
      // 返回true或false
    },
    async submit() {
      if (!this.username) {
        alert('用户名不能为空');
        return;
      }
      if (!this.validateEmail(this.username)) {
        alert('请输入正确的邮箱格式');
        return;
      }
      if (!this.password) {
        alert('密码不能为空');
        return;
      }
      if (this.password.length < 6 || this.password.length > 12) {
        alert('密码长度必须在6-12位之间');
        return;
      }

      const isExist = await this.checkUsernameExist(this.username);
      if (!isExist) {
        alert('用户名不存在');
        return;
      }

      // 提交表单
    }
  }
}
</script>