vue3表单校验hooks

Vue 3 提供了 Composition API，可以使用自定义的 Hooks 进行表单校验。下面是一个简单的示例：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label for="name">Name:</label>
      <input v-model="name" id="name" type="text" />
      <p v-if="errors.name" class="error">{{ errors.name }}</p>

      <label for="email">Email:</label>
      <input v-model="email" id="email" type="email" />
      <p v-if="errors.email" class="error">{{ errors.email }}</p>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const name = ref('');
    const email = ref('');
    const errors = reactive({
      name: '',
      email: '',
    });

    const validateForm = () => {
      let isValid = true;

      if (!name.value) {
        errors.name = 'Please enter your name';
        isValid = false;
      } else {
        errors.name = '';
      }

      if (!email.value) {
        errors.email = 'Please enter your email';
        isValid = false;
      } else if (!/\S+@\S+\.\S+/.test(email.value)) {
        errors.email = 'Please enter a valid email';
        isValid = false;
      } else {
        errors.email = '';
      }

      return isValid;
    };

    const submitForm = () => {
      if (validateForm()) {
        // 表单校验通过，执行提交逻辑
        console.log('Form submitted');
      }
    };

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

<style>
.error {
  color: red;
}
</style>

在上面的示例中，我们使用了 `ref` 来创建可响应的变量 `name` 和 `email`，以及 `reactive` 来创建可响应的对象 `errors`。通过在模板中使用 `v-model`，将输入框和数据进行双向绑定。

在 `validateForm` 函数中，我们进行表单校验，并根据校验结果更新 `errors` 对象。如果表单校验不通过，将相应的错误信息展示在页面上。

在 `submitForm` 函数中，我们调用 `validateForm` 进行表单校验。如果校验通过，我们可以执行提交逻辑。

这只是一个简单的示例，你可以根据实际需求进行更复杂的表单校验逻辑。希望能帮到你！如果有任何问题，请随时提问。