vue3正则表达式使用

在Vue3中，你可以使用正则表达式作为模板中的属性值的绑定，如下所示：

<template>
  <div>
    <input type="text" v-model="message" :pattern="regex" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      regex: /^\d+$/ // 正则表达式，匹配一个或多个数字
    }
  }
}
</script>

在上面的例子中，我们使用了`:pattern`指令将`regex`变量绑定到了`input`元素的`pattern`属性上，这个属性值是一个正则表达式，用于限制用户输入的内容必须符合这个正则表达式的规则，否则无法通过验证。

当用户输入的内容不符合正则表达式的规则时，会触发`input`元素的`invalid`事件，你可以监听这个事件并进行相应的处理：

<template>
  <div>
    <input type="text" v-model="message" :pattern="regex" @invalid="handleInvalid" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      regex: /^\d+$/ // 正则表达式，匹配一个或多个数字
    }
  },
  methods: {
    handleInvalid(event) {
      // 处理输入不符合正则表达式规则的情况
      console.log('Invalid input:', event.target.value);
    }
  }
}
</script>