ElementUI input只允许输入数字和两位小数

深碍√TFBOYSˉ_ 2022-10-28 10:20 351阅读 0赞

# 一、概述 #

ElementUI 官方给的demo，里面有验证数字的，但是没有小数点的校验。

# 二、代码实现 #

## 页面效果 ##

![6aa490e301fcbf8cb65791482b4ba571.png][]

## from表单 ##

<el-form-item label="价格" prop="price">
      <el-input v-model="ruleForm.price"  oninput="value=value.replace(/[^0-9.]/g,'')"  placeholder="请输入价格" />
    </el-form-item>

## 校验规则 ##

data() {
        const validateMoney = (rule,value,callback) =>{
            if(!value){
                callback(new Error('价格不能为空'))
             }else if(value.indexOf(".") != -1 && value.split('.').length > 2){
                callback(new Error('请输入正确格式的金额')) //防止输入多个小数点
             }else if(value.indexOf(".") != -1 && value.split('.')[1].length > 2){
               callback(new Error('请输入正确的小数位数')) //小数点后两位
            }else{
              callback();
            }
        };
        return{
         rules: {
            price:[
              { type: 'string',required: true,trigger: 'blur', validator:validateMoney},
            ]
          },
        }
      }

本文参考链接：[https://www.freesion.com/article/9003774056/][https_www.freesion.com_article_9003774056]

[6aa490e301fcbf8cb65791482b4ba571.png]: /images/20221024/06ef87c3eda04bb89caabce02ac72847.png
[https_www.freesion.com_article_9003774056]: https://www.freesion.com/article/9003774056/

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd input 只允许输入数字和小数点

问题描述项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位解决方法使用 Form.Item 中的 getValueFromEven

港控/mmm°/ 2024年03月26日 13:08/ 0 赞/ 117 阅读

相关 input输入框校验数字保留两位小数

input输入框校验只能输入数字保留两位小数利用正则表法式校验 <input type="text" name="totalAmount" required

待我称王封你为后i/ 2024年03月24日 10:01/ 0 赞/ 7 阅读

相关 input标签的值只能两位小数_input只能输入数字或两位小数

/\\ \ \[只能输入数字和两位小数\] \ 举例： \ @param obj \ @returns \ @data 20019-01-08 \/ functi

谁践踏了优雅/ 2022年12月31日 14:28/ 0 赞/ 241 阅读

相关 ElementUI input只允许输入数字和两位小数

一、概述 ElementUI 官方给的demo，里面有验证数字的，但是没有小数点的校验。二、代码实现页面效果 ![6aa490e301fcbf8cb65

深碍√TFBOYSˉ_/ 2022年10月28日 10:20/ 0 赞/ 352 阅读

相关 input输入框中只允许输入数字

<input οnkeyup="if(this.value.length==1){ this.value=this.value.replace(/[^1

缺乏、安全感/ 2022年09月29日 06:35/ 0 赞/ 284 阅读

相关 element input只能输入数字，保留3位小数

方法一、只能输入数字，保留3位小数 <el-input v-model="weightTotal"

た入场券/ 2022年09月15日 11:59/ 0 赞/ 371 阅读

相关控制input只允许输入数字

`` 好多时候我们是希望能设置input只能输入数字；比如说商城选择商品数量；比如说手机号等等；看了下京东和天猫；天猫选择商品数量是只能输入数字；而且数量不能小于1；

旧城等待，/ 2022年07月13日 10:52/ 0 赞/ 208 阅读

相关 input 只允许输入数字

一： onkeypress事件是不允许任何非数字字符 <input type="text" οnkeypress="return event.keyCode>=4

布满荆棘的人生/ 2022年06月16日 11:08/ 0 赞/ 295 阅读

相关 jquery控制input只能输入数字和两位小数（转）

知识点一直接上代码： function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,"");

爱被打了一巴掌/ 2022年06月15日 04:42/ 0 赞/ 254 阅读

相关 jQuery input 标签限制只能输入数字以及小数后面的两位小数

function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字...

深碍√TFBOYSˉ_/ 2021年05月17日 14:16/ 0 赞/ 545 阅读