vue 自定义表单验证规则

Vue 提供了多种方式来自定义表单验证规则。下面是一种常见的方法：

首先，我们可以利用 Vue 的 Mixin 功能来定义全局的验证规则。可以创建一个名为 `validationMixin.js` 的文件，内容如下：

export default {
  methods: {
    // 自定义验证规则示例
    customRule(value) {
      // 在这里编写验证逻辑，返回 true 或 false 表示验证通过与否
      // 如果验证失败，可以通过抛出一个错误的方式来显示错误信息
      if (/* 验证逻辑 */) {
        throw new Error('输入不合法')
      } else {
        return true
      }
    }
  }
}

然后，在需要使用验证规则的组件中，可以导入该 Mixin，并将其添加到组件的 `mixins` 属性中，如下所示：

<template>
  <div>
    <input v-model="inputValue" @blur="validateInput">
    <p>{{ errorMessage }}</p>
  </div>
</template>

<script>
import validationMixin from './validationMixin.js'

export default {
  mixins: [validationMixin],
  data() {
    return {
      inputValue: '',
      errorMessage: ''
    }
  },
  methods: {
    validateInput() {
      try {
        // 调用自定义验证规则
        this.customRule(this.inputValue)
        this.errorMessage = ''
      } catch (e) {
        this.errorMessage = e.message
      }
    }
  }
}
</script>

在上述组件的模板中，我们使用 `v-model` 指令来绑定输入框的值，并在输入框失去焦点时调用 `@blur` 事件来触发验证逻辑。在验证逻辑中，我们调用了之前定义的 `customRule` 方法，并根据验证结果来展示相应的错误信息。

这样，我们就可以在 Vue 中利用 Mixin 来自定义表单验证规则。在具体的验证规则中，可以根据需求编写相应的逻辑，根据验证结果来显示错误信息或者进行其他操作。除了 Mixin，还可以使用 Vue 的自定义指令等其他方式来实现表单验证规则的自定义。