使用Vue3实现响应式表单验证

最新推荐文章于 2024-09-11 15:14:17 发布

JJCTO袁龙

最新推荐文章于 2024-09-11 15:14:17 发布

阅读量688

点赞数 28

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141529319

版权

Vue 专栏收录该内容

510 篇文章 6 订阅

订阅专栏

使用Vue 3实现响应式表单验证

在现代Web开发中，用户交互的体验一直是开发者关注的重点之一，其中，表单验证是提升用户体验的重要环节之一。借助Vue 3的强大特性，我们可以轻松地实现一个响应式的表单验证系统。本文将逐步引导你如何使用Vue 3的Composition API（setup语法糖）来构建一个具备基本验证功能的表单。

项目结构

在开始之前，我们先确定一下项目的结构。以下是一个简单的项目结构：

my-vue-app/
├── src/
│   ├── components/
│   │   └── MyForm.vue
│   ├── App.vue
│   └── main.js
├── public/
│   └── index.html
└── package.json

安装 3

首先，我们需要确保Vue 3已经安装。如果你还没有创建项目，可以使用Vue CLI来创建一个新的Vue 3项目：

vue create my-vue-app
cd my-vue-app

选择Vue 3作为版本。接下来，进入到项目目录。

编写MyForm组件

在src/components目录下创建一个新的组件，命名为MyForm.vue。下面是我们的主要代码：

<template>
  <div class="form-container">
    <h2>响应式表单验证示例</h2>
    <form @submit.prevent="handleSubmit" novalidate>
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          v-model="formData.username"
          @blur="validateField('username')"
          :class="{ invalid: errors.username }"
        />
        <p v-if="errors.username" class="error">{{ errors.username }}</p>
      </div>

      <div class="form-group">
        <label for="email">邮箱</label>
        <input
          type="email"
          id="email"
          v-model="formData.email"
          @blur="validateField('email')"
          :class="{ invalid: errors.email }"
        />
        <p v-if="errors.email" class="error">{{ errors.email }}</p>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="formData.password"
          @blur="validateField('password')"
          :class="{ invalid: errors.password }"
        />
        <p v-if="errors.password" class="error">{{ errors.password }}</p>
      </div>

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

<script setup>
import { ref } from 'vue';

const formData = ref({
  username: '',
  email: '',
  password: '',
});

const errors = ref({
  username: null,
  email: null,
  password: null,
});

const validateField = (field) => {
  if (field === 'username') {
    errors.value.username = formData.value.username ? null : '用户名不能为空';
  } else if (field === 'email') {
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    errors.value.email = emailPattern.test(formData.value.email)
      ? null
      : '请输入有效的邮箱地址';
  } else if (field === 'password') {
    errors.value.password = formData.value.password.length < 6
      ? '密码长度至少为6个字符' 
      : null;
  }
};

const handleSubmit = () => {
  Object.keys(formData.value).forEach((field) => validateField(field));

  if (!errors.value.username && !errors.value.email && !errors.value.password) {
    alert('提交成功！');
  } else {
    alert('请检查表单中的错误！');
  }
};
</script>

<style scoped>
.form-container {
  max-width: 400px;
  margin: 0 auto;
}
.form-group {
  margin-bottom: 1rem;
}
.invalid {
  border: 1px solid red;
}
.error {
  color: red;
  font-size: 0.875em;
}
</style>