vue的validate表单校验

Vue.js 提供了一个非常方便的表单校验方式，即使用 `v-validate` 指令。这个指令可以应用于表单元素上，用于指定该元素需要进行校验。使用 `v-validate` 指令需要先安装 `vee-validate` 库。

下面是一个简单的例子，展示了如何使用 `v-validate` 校验一个表单：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">姓名：</label>
      <input id="name" name="name" type="text" v-validate="'required'">
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input id="email" name="email" type="email" v-validate="'required|email'">
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
    </div>
    <div>
      <label for="password">密码：</label>
      <input id="password" name="password" type="password" v-validate="'required|min:6'">
      <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import { required, email, min } from 'vee-validate/dist/rules';

extend('email', email);
extend('min', min);

export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  methods: {
    submitForm() {
      this.$refs.observer.validate().then(success => {
        if (success) {
          // 校验通过，提交表单
          console.log('submit form');
        }
      });
    },
  },
};
</script>

这个例子中，我们使用了 `v-validate` 指令指定了三个需要校验的表单元素，并且指定了它们需要满足的校验规则。在每个表单元素的下方，我们使用了 `v-show` 指令来控制错误提示信息的显示。

在 JavaScript 部分，我们定义了一个 `submitForm` 方法来提交表单。在这个方法中，我们使用了 `this.$refs.observer.validate()` 方法来触发表单校验。如果校验通过，就可以执行表单提交的操作了。

以上是一个简单的 Vue.js 表单校验的例子，具体的校验规则和用法可以参考 `vee-validate` 的官方文档。