Vuelidate 子组件

Vuelidate 是 Vue.js 的轻量级校验器，可以轻松地实现表单验证的需求。而 Vuelidate 子组件的作用则是将复杂的校验规则拆分成小的、可重复使用的部分，便于维护和扩展。

安装

在使用 Vuelidate 子组件前，需要先安装 Vuelidate：

npm install --save vuelidate

如果你用的是 Yarn，可以执行：

yarn add vuelidate

创建子组件

我们来创建一个简单的子组件用于验证邮箱地址：

// EmailValidator.js
import {validationMixin} from 'vuelidate';
import {email} from 'vuelidate/lib/validators';

export default {
  mixins: [validationMixin],
  props: ['value'],
  validations: {
    value: {email},
  },
  render() {
    return this.$scopedSlots.default({
      valid: !this.$v.value.$invalid,
    });
  },
};

在这个子组件中，我们引入了 validationMixin，并定义了一个名为 value 的 prop。我们将使用 email 校验器对邮箱地址进行验证。

在 render 方法中，我们将 valid 传递给默认插槽，该插槽包含当前子组件的内容。valid 表示当前的验证状态（true 表示通过校验，false 表示未通过）。

使用子组件

使用我们刚刚创建的子组件非常简单：

<template>
  <div>
    <label>Email:</label>
    <input v-model="email" />
    <EmailValidator v-model="email">
      <template v-slot="{ valid }">
        <span v-if="!valid">邮箱格式不正确</span>
      </template>
    </EmailValidator>
  </div>
</template>

<script>
import EmailValidator from './EmailValidator';

export default {
  components: { EmailValidator },
  data() {
    return {
      email: '',
    };
  },
};
</script>

我们先在模板中通过 v-model 将输入框与 email 绑定。然后将 email 作为 EmailValidator 的 v-model 属性传递给子组件。

在子组件中，我们使用默认插槽渲染了一个 span，当校验不通过时，该 span 会显示“邮箱格式不正确”的提示文本。

示例

下面是一个使用多个校验规则的组合子组件示例：

// CombinationValidator.js
import { validationMixin } from 'vuelidate';
import { email, maxLength, minLength, required } from 'vuelidate/lib/validators';

export default {
  mixins: [validationMixin],
  props: ['value', 'minLength', 'maxLength'],
  validations: {
    value: {
      email,
      required,
      minLength: minLength((node) => node.minLength),
      maxLength: maxLength((node) => node.maxLength),
    },
  },
  computed: {
    isNotValid() {
      return this.$v.value.$invalid;
    },
  },
  render() {
    return this.$scopedSlots.default({
      valid: !this.isNotValid,
      invalid: this.isNotValid,
      errors: this.$v.value.$errors,
    });
  },
};

在该组件中，我们引入了 required、email、minLength 和 maxLength 校验器并将它们组合起来使用。同时，我们还通过 props 接收了 minLength 和 maxLength 并将它们传递给最小长度和最大长度校验器。

在 computed 中，我们计算出当前校验是否不通过。在 render 方法中，我们将 valid、invalid 和 errors 传递给默认插槽。

下面是在模板中使用该组件的示例：

<template>
  <div>
    <label>邮箱地址:</label>
    <input v-model="email" />
    <CombinationValidator v-model="email" :min-length="5" :max-length="20">
      <template v-slot="{ valid, invalid, errors }">
        <span v-if="invalid">{{ errors[0] }}</span>
      </template>
    </CombinationValidator>
  </div>
</template>

<script>
import CombinationValidator from './CombinationValidator';

export default {
  components: { CombinationValidator },
  data() {
    return {
      email: '',
    };
  },
};
</script>

在上面的模板中，我们使用了 CombinationValidator 组件，并将 v-model 绑定到了 email。我们还在组件中传递了最小长度和最大长度的值，并在插槽中在校验不通过时显示了错误信息。