简单的v-decorator表单校验

V-decorator是基于Vue.js的表单校验插件，它可以帮助我们在Vue.js中更方便地实现表单校验。

以下是一个简单的使用v-decorator进行表单校验的例子：

<template>
  <div>
    <form>
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="name">
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model="age">
      </div>
      <div>
        <button @click.prevent="submitForm">提交</button>
      </div>
    </form>
  </div>
</template>

<script>
import { required, numeric } from 'vuelidate/lib/validators';
import { validationMixin } from 'vuelidate';

export default {
  name: 'MyForm',
  mixins: [validationMixin],
  data() {
    return {
      name: '',
      age: '',
    };
  },
  validations: {
    name: {
      required,
    },
    age: {
      required,
      numeric,
    },
  },
  methods: {
    submitForm() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 表单校验通过
        console.log('表单校验通过');
      }
    },
  },
};
</script>

在上面的例子中，我们使用了vuelidate来完成表单校验，具体步骤如下：

1. 安装vuelidate和v-decorator

npm install --save vuelidate v-decorator

2. 在组件中引入vuelidate和v-decorator

import { required, numeric } from 'vuelidate/lib/validators';
import { validationMixin } from 'vuelidate';

3. 在组件中使用validationMixin

mixins: [validationMixin],

4. 在组件的data中定义需要校验的表单项

data() {
  return {
    name: '',
    age: '',
  };
},

5. 在组件的validations中定义每个表单项的校验规则

validations: {
  name: {
    required,
  },
  age: {
    required,
    numeric,
  },
},

6. 在组件中调用$v.$touch()方法触发表单校验

submitForm() {
  this.$v.$touch();
  if (!this.$v.$invalid) {
    // 表单校验通过
    console.log('表单校验通过');
  }
},

通过以上步骤，就可以轻松地使用v-decorator进行表单校验了。