ElementUI input只允許輸入數字和兩位小數

一、概述

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/