vue2的form表单验证对象

在 Vue 2 中，通常使用第三方库来实现表单验证，比如 VeeValidate、vee-validate、vue-validator 等。

其中，VeeValidate 是一个轻量级的表单验证库，支持异步验证，自定义验证规则等功能。它提供了一个名为 ValidationProvider 的组件，用于输入框的验证，以及 ValidationObserver 组件，用于整个表单的验证。

以下是一个使用 VeeValidate 实现表单验证的示例：

1. 安装 VeeValidate：

npm install vee-validate --save

2. 在 main.js 中引入和使用 VeeValidate：

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

3. 在组件中使用 ValidationProvider 和 ValidationObserver 组件：

<template>
  <ValidationObserver ref="form">
    <div>
      <ValidationProvider
        name="email"
        rules="required|email|unique:users,email"
        v-slot="{ errors }"
      >
        <input type="email" v-model="email" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
    </div>

    <div>
      <ValidationProvider
        name="password"
        rules="required|min:6|max:16"
        v-slot="{ errors }"
      >
        <input type="password" v-model="password" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
    </div>

    <button @click="submitForm">Submit</button>
  </ValidationObserver>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    async submitForm() {
      const isValid = await this.$refs.form.validate();
      if (isValid) {
        // 表单验证通过，提交数据
      }
    },
  },
};
</script>

以上代码中，ValidationProvider 组件用于对输入框进行验证，name 属性指定要验证的字段名称，rules 属性指定验证规则，v-slot 用于显示错误信息。

ValidationObserver 组件用于整个表单的验证，ref 属性指定表单的引用名称。

submitForm 方法用于提交表单数据，使用 $refs 获取到 ValidationObserver 组件的引用，调用 validate 方法进行表单验证，如果验证通过，提交表单数据。