在項目開發(fā)過程中誉己，經(jīng)常遇到input框驗證金額侨舆，價格的情況戒职，驗證整型的都很簡單栗恩，v-model.number="綁定值"，但是element沒有提供驗證一位小數(shù)或者兩位小數(shù)金額的驗證洪燥，網(wǎng)上看了一圈磕秤，都感覺要么不能用，要么太復雜捧韵，看了一哈element文檔市咆，咦，發(fā)現(xiàn)可以使用自定義規(guī)則驗證
在驗證之前先來說一下rules驗證的參數(shù)有哪些,rules寫法大致是這樣：
rules: {
? ? ? ? orderPrice: [
? ? ? ? ? { required: true, message: '請輸入金額', trigger: 'change' },
? ? ? ? ? { min: 0, max: 9999, validator: validatPrice, trigger: 'change' }
? ? ? ? ]
}
required：是否為必填字段再来，true/false蒙兰，true的話有一個紅色的小星星
message： 錯誤的時候提示的內(nèi)容
trigger： 什么事件觸發(fā)，change / blur等值
下面的參數(shù)根據(jù)情況而定可要可不要：
min：輸入的最小值芒篷，max：輸入的最大值
validator：定義一個校驗搜变，校驗的規(guī)則就需要自己寫了
那么驗證金額價格這個主要的回傳函數(shù)怎么寫呢
/* 價格驗證2兩位小數(shù)點*/
export function validatPrices(rule, value, callback) {
? if (rule.required === false && (value === '' || value === null || value === undefined)) {
? ? callback()
? }
? const isPrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
? if (isPrice.test(value)) {
? ? callback()
? } else {
? ? callback(new Error(rule.message || '請輸入正確的價格稻薇，例：10, 10.00'))
? }
}
這個函數(shù)主要就是正則表達式怎么寫狡恬，我這里是驗證兩位降允，如果驗證一位小數(shù)那么就把正則改為 /(^[1-9]\d*(\.\d{1})?$)|(^0(\.\d{1})?$)/ 就可以了钓猬，
我這項目很多地方都要使用到這個函數(shù)吹零，所以我就把他放在vue的utils文件夾下的公共方法里面屑迂，在頁面引入
import {? validatPrice } from '@/utils/validate'
如果你只有一次使用到拇颅，那就直接放到頁面data（）{}下面就好啦荧恍，
然后將你定義的函數(shù)名 + validator就可以了，validator: validatPrice拢军，最后的如果輸入不正確結(jié)果就是這樣：
