vue3 代码示范 满足 文本框不能为空，限制最少录入2个字符，最多录入100个字符。

在Vue3中，你可以使用v-model指令配合自定义的验证规则来实现这个需求。首先，创建一个表单组件并包含一个文本输入框。这里是一个简单的示例：

<template>
  <div>
    <input type="text" v-model="username" @input="validateInput" placeholder="请输入至少2个字符，不超过100个字符">
    <span v-if="hasError">{{ errorMessage }}</span>
  </div>
</template>

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

const username = ref('');
const errorMessage = ref('');

// 验证函数
function validateInput(e) {
  const inputVal = e.target.value;
  
  // 空白检查
  if (!inputVal) {
    setErrorMessage('请输入内容');
  } else {
    // 长度检查
    if (inputVal.length < 2 || inputVal.length > 100) {
      setErrorMessage(`请输入2到100个字符`);
    } else {
      setErrorMessage('');
    }
  }
}

function setErrorMessage(message) {
  errorMessage.value = message;
}
</script>

在这个例子中，当用户在文本框中输入时，`validateInput`函数会被触发，它会检查输入是否为空以及长度是否在规定范围内。如果有错误，会在页面上显示错误信息。