vue表单应用：写一个简单的Vue表单验证方法

夜深了，分享一个vue表单应用。

npm install vuelidate

或者

yarn add vuelidate

安装完成后，你需要在Vue中引入vuelidate插件。你可以在Vue组件中使用validations属性来定义表单验证规则。例如：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label>
      <input id="name" v-model="name" />
      <div v-if="$v.name.$error">Name is required</div>
    </div>
    <div>
      <label for="email">Email:</label>
      <input id="email" v-model="email" />
      <div v-if="$v.email.$error">Email is invalid</div>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      name: '',
      email: '',
    }
  },
  validations: {
    name: {
      required,
    },
    email: {
      required,
      email,
    },
  },
  methods: {
    submitForm() {
      if (this.$v.$invalid) {
        return
      }
      // submit form
    },
  },
}
</script>

在上面的例子中，我们定义了两个表单字段：name和email。我们使用validations属性来定义它们的验证规则。required和email是vuelidate提供的两个验证器。如果表单验证失败，我们可以使用$v对象来访问验证错误信息。
最后，我们在submitForm方法中检查表单是否有效。如果表单无效，我们不会提交表单。
希望这可以帮助你实现Vue表单验证！