Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位

要实现只能输入数字且小数点后只能是1-2位的功能,可以使用Element UI的el-input组件,并结合正则表达式和自定义校验函数来限制输入。

1. 在模板中使用el-input组件,并设置其type属性为"number",以确保只能输入数字。

```html
<template>
  <el-input v-model="inputValue" type="number"></el-input>
</template>
```

2. 在data中定义一个inputValue的变量,用于双向数据绑定输入框的值。

```javascript
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>
```

3. 在el-input组件上添加一个自定义的校验函数,用于限制小数点后的位数。在该函数中,使用正则表达式来匹配输入的值是否合法。

```html
<template>
  <el-input v-model="inputValue" type="number" :validate="validateInput"></el-input>
</template>
```

```javascript
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    validateInput(rule, value, callback) {
      const reg = /^\d+(\.\d{1,2})?$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的数字(最多两位小数)'))
      } else {
        callback()
      }
    }
  }
}
</script>
```

通过以上步骤,就可以实现只能输入数字并且小数点后只能是1-2位的限制。当输入不合法时,会显示错误提示信息。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-30 17:00:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-30 17:00:03       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-30 17:00:03       82 阅读
  4. Python语言-面向对象

    2023-12-30 17:00:03       91 阅读

热门阅读

  1. mysql隔离级别和串行化

    2023-12-30 17:00:03       57 阅读
  2. LeetCode每日一题——1185. Day of the Week

    2023-12-30 17:00:03       56 阅读
  3. 函数的地址

    2023-12-30 17:00:03       51 阅读
  4. Vue 3插槽

    2023-12-30 17:00:03       65 阅读
  5. 【PHP】Guzzle 请求方法类封装

    2023-12-30 17:00:03       60 阅读
  6. vue3-回顾之,状态管理神器 大菠萝- pinia

    2023-12-30 17:00:03       56 阅读
  7. CSS学习之-02

    2023-12-30 17:00:03       60 阅读
  8. c++:new和delete的运算符重载

    2023-12-30 17:00:03       57 阅读
  9. k8s报错处理

    2023-12-30 17:00:03       55 阅读
  10. 212. Word Search II

    2023-12-30 17:00:03       56 阅读