vue 使用正则表达式 1-400 正整数 测试数据

Vue 中，你可以利用正则表达式 (regex) 来验证输入的数据是否满足指定的格式，例如1到400之间的正整数。下面是一个简单的例子：

<template>
  <input v-model="inputValue" @blur="validateInput" />
  <p :class="{ error: hasError }">{{ errorMessage }}</p>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      hasError: false,
      errorMessage: ''
    };
  },
  methods: {
    validateInput() {
      const regex = /^\d{1,4}$/; // 正则表达式匹配1到4位数字
      if (!regex.test(this.inputValue)) {
        this.hasError = true;
        this.errorMessage = '请输入1至400的正整数';
      } else {
        this.hasError = false;
        if (parseInt(this.inputValue) > 400) {
          this.errorMessage = '输入值超过400，请重新输入';
        } else {
          this.errorMessage = '';
        }
      }
    }
  }
};
</script>

<style scoped>
.error {
  color: red;
}
</style>

在这个例子中，`v-model`用于双向绑定输入框的值，当用户停止键入并触发 `@blur` 事件时，会调用 `validateInput` 方法。正则表达式 `^\d{1,4}$` 确保输入只包含1到4个数字。如果输入不符合规定，就会显示错误消息。