在项目开发过程中，经常遇到input框验证金额，价格的情况，验证整型的都很简单，v-model.number="绑定值"，但是element没有提供验证一位小数或者两位小数金额的验证，网上看了一圈，都感觉要么不能用，要么太复杂，看了一哈element文档，咦，发现可以使用自定义规则验证
在验证之前先来说一下rules验证的参数有哪些,rules写法大致是这样：
rules: {
orderPrice: [
{ required: true, message: '请输入金额', trigger: 'change' },
{ min: 0, max: 9999, validator: validatPrice, trigger: 'change' }
]
}
required：是否为必填字段，true/false，true的话有一个红色的小星星
message： 错误的时候提示的内容
trigger： 什么事件触发，change / blur等值
下面的参数根据情况而定可要可不要：
min：输入的最小值，max：输入的最大值
validator：定义一个校验，校验的规则就需要自己写了
那么验证金额价格这个主要的回传函数怎么写呢
/* 价格验证2两位小数点*/
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'))
}
}
这个函数主要就是正则表达式怎么写，我这里是验证两位，如果验证一位小数那么就把正则改为 /(^[1-9]\d*(\.\d{1})?$)|(^0(\.\d{1})?$)/ 就可以了，
我这项目很多地方都要使用到这个函数，所以我就把他放在vue的utils文件夹下的公共方法里面，在页面引入
import { validatPrice } from '@/utils/validate'
如果你只有一次使用到，那就直接放到页面data（）{}下面就好啦，
然后将你定义的函数名 + validator就可以了，validator: validatPrice，最后的如果输入不正确结果就是这样：
输入错误的展示效果
网友评论