前端正则表达式 不能有汉字跟数字以外的数据 并且必须包含数字和字母 在vue3中如何实现

在 Vue.js 中，你可以使用正则表达式 (regex) 和 `v-model` 或者自定义的验证规则来检查输入字段的内容。这里是一个简单的例子，展示如何在 Vue 组件的 `<input>` 标签上使用正则表达式验证输入是否符合要求：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="validateInput">
    <p :class="{ invalid: hasInvalidInput }">输入无效</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const inputValue = ref('');
const regexPattern = /^[a-zA-Z0-9]*$/; // 匹配只包含数字和字母的字符串

function validateInput() {
  const inputVal = inputValue.value;
  if (!regexPattern.test(inputVal)) {
    hasInvalidInput = true;
  } else {
    hasInvalidInput = false;
  }
}

onMounted(() => {
  validateInput(); // 初始验证
})

const hasInvalidInput = computed(() => !regexPattern.test(inputValue.value));
</script>

<style scoped>
.invalid {
  border-color: red;
}
</style>

在这个示例中，当用户在输入框中输入内容时，`validateInput` 函数会被触发。如果输入不符合正则表达式的模式，`hasInvalidInput` 计算属性会变为 `true`，显示红色边框表示输入无效。