一、概述

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/