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

发布时间:2021-02-04 09:59:26编辑:admin阅读(313)

    一、概述

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

     

    二、代码实现

    页面效果

    1.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/


关键字