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

方法一

1、页面效果

在这里插入图片描述

2、FORM表单
<el-form-item label="审计价格(元)" prop="auditPrice">     
  <el-input v-model="form.auditPrice"  oninput="value=value.replace(/[^0-9.]/g,'')"  placeholder="请输入审计价格" />
</el-form-item>
3、校验规则
  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: {
    
    
        auditPrice:[
          {
    
     type: 'string',required: true,trigger: 'blur', validator:validateMoney},
        ]
      },
    }
  }

方法二

1、页面效果

在这里插入图片描述

2、实现
<el-form-item label="审计价格(元)" prop="auditPrice">
   <el-input-number v-model="form.auditPrice" :min="0" :controls="false" :precision="2"></el-input-number>
</el-form-item>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42365757/article/details/122820785