vue 1-30之间的正整数正则校验

在Vue中，如果你想验证输入的数字是否在1到30之间（包括1和30），你可以创建一个自定义的正则表达式，并结合Vue的v-model指令以及v-bind:class或v-validate指令来进行验证。下面是一个简单的例子：

<input type="number" v-model.number="inputValue" @blur="validateNumber" />

<script>
export default {
  data() {
    return {
      inputValue: '',
      regexPattern: /^\d{1,2}$/,
    };
  },
  methods: {
    validateNumber() {
      if (this.regexPattern.test(this.inputValue) && this.inputValue >= 1 && this.inputValue <= 30) {
        // 如果验证通过，可以设置一个布尔值或者其他状态表示成功
        this isValid = true;
      } else {
        // 验证失败，这里可以设置错误信息或者其他提示
        this.isValid = false;
      }
    },
  },
};
</script>

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

在这个例子中，`^\d{1,2}$` 正则表达式用于匹配1到两位的数字。然后在 `validateNumber` 方法中，我们检查输入是否满足这个模式并且在1到30范围内。