vue实现 自定义正则验证

要封装一个全局调用的输入校验，你可以创建一个全局指令来实现。以下是一个示例，演示如何创建一个全局的输入校验指令，并根据校验结果来动态改变输入框的样式：

// main.js
import Vue from 'vue';
import App from './App.vue';

// 注册全局的输入校验指令
Vue.directive('inputValidation', {
  bind(el, binding) {
    el.classList.add('input-validation');

    el.addEventListener('blur', () => {
      const value = el.value;
      const validationFunction = binding.value;

      // 调用校验函数，并根据校验结果添加相应的类名
      if (validationFunction(value)) {
        el.classList.remove('input-invalid');
        el.classList.add('input-valid');
      } else {
        el.classList.remove('input-valid');
        el.classList.add('input-invalid');
      }
    });
  },
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

在组件中调用的话

<!-- App.vue -->
<template>
  <div id="app">
    <input v-input-validation="validateInput" />
  </div>
</template>

<script>
export default {
  methods: {
    validateInput(value) {
      // 进行输入校验的逻辑
      return value !== '';
    },
  },
};
</script>

<style>
.input-validation {
  /* 添加输入框的通用样式 */
}

.input-valid {
  border: 2px solid green;
}

.input-invalid {
  border: 2px solid red;
}
</style>

在上述示例中，我们创建了一个全局指令 v-input-validation，并在 bind 钩子中实现了输入校验的逻辑。当输入框失去焦点时，会调用绑定的校验函数 validateInput，根据校验结果添加相应的类名，从而动态改变输入框的样式。

在 validateInput 方法中，你可以根据实际需求编写输入校验的逻辑。示例中使用了一个简单的校验逻辑，即输入值不为空时返回 true，否则返回 false。

通过使用全局指令的方式，你可以在任何地方使用 v-input-validation 指令来实现输入校验，并动态改变输入框的样式，无需重复编写校验逻辑和样式。