element 表单只允许输入数字和两位小数,保留两位小数(四舍五入) 小数不足两位补0

1.form表单


<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
 
  <el-form-item label="提现金额" prop="withdrawAmount">
    <el-input 
        v-model="ruleForm.withdrawAmount" 
        auto-complete="off"
        oninput="value=value.replace(/[^0-9.]/g,'')"  
/>
  </el-form-item>
  
</el-form>

input 的属性autocomplete 默认为on其含义代表是否让浏览器自动记录之前输入的值 很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete=“off” 来关闭记录
系统需要保密的情况下可以使用此参数

2.script

<script>
  export default {
    
    
    data() {
    
    
	    var validatePrice = (rule, value, callback) => {
    
    
	      if (!value) {
    
    
	        callback(new Error("提现金额不能为空"));
	      } else if (value.split(".").length > 2) {
    
    
	        callback(new Error("输入正确格式的金额")); //防止输入多个小数点
	      } else if (value > this.price) {
    
    
	        callback(new Error("金额不能大于可提现金额"));
	      } else {
    
    
	        value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 			2); //四舍五入
	        value = Number(value).toFixed(2); //不足补位
	        this.ruleForm.withdrawAmount = value;
	        callback();
	      }
	    };
      return {
    
    
        ruleForm: {
    
     withdrawAmount: "" },
        rules: {
    
    
          withdrawAmount: [
            {
    
     required: true, validator: validatePrice, trigger: "blur" }
          ]
        }
      }
    },
    methods: {
    
    
      
    }
  }
</script>

おすすめ

転載: blog.csdn.net/weCat_s/article/details/119147038