vue3怎么给input框加正则

要给 input 框加正则，可以借助 Vue3 的指令，在模板中使用 v-model 绑定数据，并在 input 标签上使用自定义指令。

下面是一个示例，假设我们要让用户输入一个 6 位数字的验证码：

<template>
  <div>
    <input v-model="code" v-verify="'/^\d{6}$/'" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        code: '',
      };
    },
    directives: {
      verify: {
        mounted(el, binding) {
          const pattern = new RegExp(binding.value);
          el.addEventListener('input', () => {
            const value = el.value;
            el.value = value.replace(pattern, '');
            this.code = el.value;
          });
        },
      },
    },
  };
</script>

在上面的代码中，我们使用了 v-verify 自定义指令，并传入了正则表达式 `/^\d{6}$/`，表示要匹配 6 位数字。在指令的 mounted 钩子函数中，我们通过监听 input 事件，实时过滤用户输入的内容，只保留符合正则表达式的内容，并将过滤后的值赋值给 data 中的 code 属性，从而实现了输入框加正则的功能。