vue el-input 输入框只能输入数字和小数点

在Vue中，如果你想限制`el-input`输入框只允许用户输入数字和小数点，你可以使用`v-model.number`指令，并配合自定义事件处理程序来实现这样的功能。这个指令会自动阻止非数字字符的输入，并且保持模型值始终为数值。

首先，在模板上设置输入框：

<template>
  <el-input v-model.number="inputValue" placeholder="请输入数字">
</template>

然后，在Vue组件的data部分定义`inputValue`：

export default {
  data() {
    return {
      inputValue: 0,
    };
  },
};

为了防止用户直接输入非法字符，你还可以添加一个自定义的键盘监听事件，例如`@keyup.native`：

<template>
  <el-input
    v-model.number="inputValue"
    placeholder="请输入数字"
    @keyup.native.prevent
  ></el-input>
</template>

最后，使用`prevent`属性阻止所有默认的键盘事件，包括可能会插入非法字符的事件。

相关问题

element ui el-input 输入框只能输入1-99范围内的并且可以输入两位小数点的正数，用正则校验

在Element UI的`el-input`中，你可以通过设置自定义验证规则来进行正则表达式校验，确保输入的数字在1-99范围内并包含两位小数。下面是一个示例，如何使用正则表达式：

首先，在Vue组件中引入`element-ui`并设置自定义验证规则：

<template>
  <el-form :model="form">
    <el-form-item label="数值范围" prop="value">
      <el-input v-model.number="form.value" :rules="{ required: true, validator: validateRangeAndDecimal }"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { value: null },
    };
  },
  methods: {
    validateRangeAndDecimal(rule, value, callback) {
      const regExp = /^([1-9][0-9]?(\.[0-9]{2})?)$/;
      if (!regExp.test(value)) {
        callback(new Error('请输入1-99范围内的两位小数正数'));
      } else {
        callback();
      }
    },
  },
};
</script>

在这个例子中，我们创建了一个名为`validateRangeAndDecimal`的校验函数，它接收三个参数：规则、用户输入值和回调函数。正则表达式`/^([1-9][0-9]?(\.[0-9]{2})?)$/`用于匹配符合条件的输入：

- `^` 表示字符串开始，
- `[1-9]` 匹配一位非零数字，
- `[0-9]?` 匹配一位可选数字（包括零，因为前面已经有非零条件），
- `(\.[0-9]{2})?` 匹配一个小数点后面最多两位的数字（可选），
- `$` 表示字符串结束。

如果输入不符合这个正则，就会触发错误提示。请注意，`v-model.number`确保了用户只能输入数字。

element ui el-input 输入框只能输入1-99范围内的并且可以输入1位或者2小数点的正数，用正则校验

Element UI 的 `el-input` 组件结合正则表达式可以实现这样的验证功能。你可以使用 Vue.js 中的 `v-model` 指令配合自定义的 `input` 事件监听，以及 `pattern` 属性来进行这种特定格式的输入验证。

下面是一个简单的示例：

<template>
  <el-form-item label="数值范围">
    <el-input v-model.number="inputValue" placeholder="请输入1-99范围内的数字(最多2位小数)">
      <span slot="append">.</span>
    </el-input>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleInput(e) {
      const pattern = /^\d+(\.\d{1,2})?$/; // 正则表达式匹配整数和最多两位的小数
      if (!pattern.test(e.target.value)) { // 如果输入不符合正则
        this.inputValue = e.target.value; // 清空输入并显示错误信息
      }
    },
  },
  watch: {
    inputValue(newVal, oldVal) {
      if (newVal !== oldVal && !/^(\d{1,2}|[1-9]\d?)\.{0,1}\d{0,2}$/.test(newVal)) {
        this.inputValue = oldVal; // 如果输入改变且不符合规则，恢复旧值
      }
    },
  },
  directives: {
    'number': {
      bind(el, binding) {
        el.addEventListener('input', this.handleInput);
      },
      unbind(el) {
        el.removeEventListener('input', this.handleInput);
      },
    },
  },
};
</script>

在这个例子中，我们使用了正则表达式 `^\d+(\.\d{1,2})?$` 来匹配1到99之间的整数和最多两位的小数。如果用户输入不符合这个模式，会自动清空输入值。