el-input输入 百分数正则

在Element UI库中的`el-input`组件中，如果你想限制用户输入的是百分数，你可以自定义其验证规则，通常会使用正则表达式来匹配。一个常见的百分数正则表达式可能是这样的：

/^(0?[1-9]|100) ?%$/

这个正则表达式的含义是：
- `^` 表示字符串的开始
- `(0?[1-9]|100)` 匹配0到99之间的数字（包括0），或者是100
- ` ?%` 匹配零个或一个空格后跟百分号%
- `$` 表示字符串的结束

这样设置后，只有包含一个或两个数字加百分号的输入才会被认为是有效的百分比。

如果你想要在Vue中配合`v-model.number`使用，可以将这个正则表达式作为验证函数传给`el-form`的`rules`选项：

<template>
  <el-form :model="percentage" :rules="{ percentage: { validator: validatePercentage } }">
    <el-input v-model.number="percentage" placeholder="请输入百分比"></el-input>
    <span v-if="$errors.first('percentage')">输入错误，请输入有效的百分比</span>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      percentage: '',
    };
  },
  methods: {
    validatePercentage(value) {
      const regex = /^(0?[1-9]|100) ?%$/;
      if (value && !regex.test(value)) {
        this.$emit('validate', false);
        return '输入错误，请输入有效的百分比';
      }
      return true;
    },
  },
};
</script>