当前位置：首页 > VUE

vue 实现表单验证

2026-02-19 20:36:18VUE

Vue 表单验证的实现方法

Vue 中实现表单验证可以通过多种方式，以下介绍几种常见的方法：

使用 Vue 内置的 `v-model` 和自定义验证

通过 v-model 绑定表单数据，结合计算属性或方法进行验证。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.email" type="email" placeholder="Email">
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      },
      errors: {
        email: ''
      }
    }
  },
  methods: {
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!this.form.email) {
        this.errors.email = 'Email is required';
      } else if (!emailRegex.test(this.form.email)) {
        this.errors.email = 'Please enter a valid email';
      } else {
        this.errors.email = '';
      }
    },
    submitForm() {
      this.validateEmail();
      if (!this.errors.email) {
        // Submit the form
      }
    }
  }
}
</script>

使用 VeeValidate 插件

VeeValidate 是一个流行的 Vue 表单验证库，提供了丰富的验证规则和错误提示功能。

安装 VeeValidate：

npm install vee-validate

基本使用：

<template>
  <Form @submit="submitForm">
    <Field name="email" type="email" rules="required|email" v-model="form.email" />
    <ErrorMessage name="email" />
    <button type="submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from 'vee-validate';

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },
  data() {
    return {
      form: {
        email: ''
      }
    }
  },
  methods: {
    submitForm() {
      // Form is valid, submit logic here
    }
  }
}
</script>

使用 Element UI 的表单验证

如果使用 Element UI 组件库，可以利用其内置的表单验证功能。

安装 Element UI：

npm install element-ui

示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      },
      rules: {
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please input correct email', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // Submit the form
        }
      });
    }
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以利用 Composition API 和 ref 或 reactive 来实现表单验证。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.email" type="email" placeholder="Email">
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">Submit</button>
  </form>
</template>

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

export default {
  setup() {
    const form = reactive({
      email: ''
    });
    const errors = reactive({
      email: ''
    });

    const validateEmail = () => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!form.email) {
        errors.email = 'Email is required';
      } else if (!emailRegex.test(form.email)) {
        errors.email = 'Please enter a valid email';
      } else {
        errors.email = '';
      }
    };

    const submitForm = () => {
      validateEmail();
      if (!errors.email) {
        // Submit the form
      }
    };

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