vue3 多个表单验证

可以使用 Vue3 的内置表单验证机制，通过 v-model 指令与表单组件绑定数据，然后通过特定的属性和方法实现表单验证。

例如，在表单组件中使用 v-model 指令绑定一个名为 username 的数据：

<template>
  <input v-model="username">
</template>

<script>
  export default {
    data() {
      return {
        username: ''
      }
    }
  }
</script>

接着，在表单提交时触发验证方法：

<template>
  <form @submit.prevent="submitForm">
    <!-- ... -->
  </form>
</template>

<script>
  export default {
    methods: {
      submitForm() {
        if (!this.isValid) {
          return;
        }

        // 实现表单提交逻辑
      }
    },
    computed: {
      isValid() {
        return this.username.length > 0;
      }
    }
  }
</script>

在这个例子中，使用 computed 属性 isValid 实现了一个非空验证，如果用户名长度为 0，则不能提交表单。可以加入其他的验证方法来处理更复杂的表单验证需求。