Element-Ui 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},
        ]
      },
    }
  }

注意

经测试，该方法存在一个比较隐秘的bug，在中文输入法状态下，输入文字，点击空格键强制插入文字，input框为空，但此时再输入数字时，提示“不能为空，不能删除”，优化方法如“方法二”

方法二

1、页面效果

2、实现

<el-form-item label="合同金额(元)" prop="contractAmount">
  <el-input v-model="form.contractAmount" clearable placeholder="请输入合同金额" />
</el-form-item>

在校验中

 contractAmount:[
    { required: true, type: 'string', trigger: 'blur', message:'合同金额不能为空'},
    { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
    ],

方法三

1、页面效果

不足两位小数，自动补0

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>