当前位置：首页 > VUE

vue实现表单验证

2026-02-19 11:59:22VUE

Vue 表单验证实现方法

使用 Vue 内置指令

Vue 提供了 v-model 和事件绑定来实现基础表单验证。可以通过计算属性和方法来检查输入是否符合要求。

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

<script>
export default {
  data() {
    return {
      email: '',
      emailError: ''
    }
  },
  methods: {
    validateEmail() {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.emailError = re.test(this.email) ? '' : 'Invalid email';
    },
    submitForm() {
      this.validateEmail();
      if (!this.emailError) {
        // 提交表单
      }
    }
  }
}
</script>

使用 VeeValidate 库

VeeValidate 是流行的 Vue 表单验证库，提供声明式验证规则和错误消息管理。

<template>
  <Form @submit="submitForm">
    <Field name="email" type="email" :rules="emailRules" />
    <ErrorMessage name="email" />
    <button type="submit">Submit</button>
  </Form>
</template>

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

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },
  data() {
    return {
      schema: yup.object({
        email: yup.string().required().email()
      })
    }
  },
  methods: {
    submitForm(values) {
      console.log(values);
    }
  }
}
</script>

使用 Element UI 表单验证

Element UI 等 UI 框架内置了表单验证功能，通过 rules 属性定义验证规则。

<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-button @click="submitForm">Submit</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      },
      rules: {
        email: [
          { required: true, message: 'Email is required', trigger: 'blur' },
          { type: 'email', message: 'Invalid email', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单
        }
      });
    }
  }
}
</script>

自定义验证指令

可以创建自定义指令来实现特定验证逻辑，适合需要复用验证逻辑的场景。

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

<script>
export default {
  directives: {
    password: {
      inserted(el) {
        el.addEventListener('blur', () => {
          const value = el.value;
          if (value.length < 8) {
            alert('Password must be at least 8 characters');
          }
        });
      }
    }
  },
  data() {
    return {
      password: ''
    }
  }
}
</script>