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

最新推荐文章于 2025-06-10 18:15:52 发布

原创最新推荐文章于 2025-06-10 18:15:52 发布 · 4.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #tensorflow

本文介绍如何在ElementUI中实现价格输入的校验，包括整数和小数点的格式限制，提供代码示例和校验规则的详细编写过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

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

二、代码实现

页面效果

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/