vue3手写表单校验功能示例

在 Vue 3 中，手写一个表单校验功能可以通过自定义校验逻辑来实现。以下是一个简单的示例，展示如何在 Vue 3 中实现表单校验。

1. 创建 Vue 3 项目

首先，确保你已经创建了一个 Vue 3 项目。如果还没有，可以使用以下命令创建一个新的 Vue 3 项目：

npm init vue@latest

2. 创建表单组件

接下来，创建一个简单的表单组件，包含输入字段和校验逻辑。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="form.username" />
      <span v-if="errors.username" class="error">{{ errors.username }}</span>
    </div>

    <div>
      <label for="email">邮箱:</label>
      <input type="email" id="email" v-model="form.email" />
      <span v-if="errors.email" class="error">{{ errors.email }}</span>
    </div>

    <div>
      <label for="password">密码:</label>
      <input type="password" id="password" v-model="form.password" />
      <span v-if="errors.password" class="error">{{ errors.password }}</span>
    </div>

    <button type="submit">提交</button>
  </form>
</template>

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

export default {
  setup() {
    const form = reactive({
      username: '',
      email: '',
      password: '',
    });

    const errors = reactive({
      username: '',
      email: '',
      password: '',
    });

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

      // 校验用户名
      if (!form.username) {
        errors.username = '用户名不能为空';
        isValid = false;
      } else {
        errors.username = '';
      }

      // 校验邮箱
      if (!form.email) {
        errors.email = '邮箱不能为空';
        isValid = false;
      } else if (!/\S+@\S+\.\S+/.test(form.email)) {
        errors.email = '邮箱格式不正确';
        isValid = false;
      } else {
        errors.email = '';
      }

      // 校验密码
      if (!form.password) {
        errors.password = '密码不能为空';
        isValid = false;
      } else if (form.password.length < 6) {
        errors.password = '密码长度不能少于6个字符';
        isValid = false;
      } else {
        errors.password = '';
      }

      return isValid;
    };

    const submitForm = () => {
      if (validateForm()) {
        // 表单校验通过，提交表单
        console.log('表单提交成功', form);
      } else {
        console.log('表单校验失败');
      }
    };

    return {
      form,
      errors,
      submitForm,
    };
  },
};
</script>

<style>
.error {
  color: red;
  font-size: 0.8em;
}
</style>

3. 解释代码

• form 对象: 使用 reactive 创建响应式对象，用于存储表单数据。
• errors 对象: 使用 reactive 创建响应式对象，用于存储校验错误信息。
• validateForm 函数: 包含表单校验逻辑，检查每个字段是否符合要求，并更新 errors 对象。
• submitForm 函数: 在表单提交时调用 validateForm 函数进行校验，如果校验通过则提交表单，否则显示错误信息。