element的el-input输入框只能输入数字和小数方法

以下是两种element的el-input输入框只能输入数字和小数的方法：
1. 只能输入纯数字：

el-input v-model="aaa" type="text" @input="(v) => (aaa=v.replace(/[^\d]/g,''))"></el-input>

2. 能输入纯数字和小数（比如：6.66）：

<el-input v-model="aaa" type="text" @input="(v) => (aaa=v.replace(/[^\d.]/g,''))"></el-input>

相关问题

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之间的整数和最多两位的小数。如果用户输入不符合这个模式，会自动清空输入值。