element-ui 表单常用验证(正整数,价格)
2019-01-08 本文已影响0人
锋叔
数量:(请输入1-999的正整数)
// 只是截取表单里的item,如果看不懂只能证明你菜得无药可救咯。
<el-form-item
:prop="'form.number"
:rules="numberRule">
<el-input type="text" v-model.number="form.number"></el-input>
</el-form-item>
// data部分
numberRule: [
{ required: true, message: '请输入', trigger: 'blur' },
{
validator(rule, value, callback) {
if (Number.isInteger(Number(value)) && Number(value) > 0 && Number(value) < 999) {
callback()
} else {
callback(new Error('请输入1-999的正整数'))
}
},
trigger: 'blur'
}
]
原先使用了正则,可能是正则不够变态,反正例如空数组,空对象,null,undefined,NaN验证不了,然后验证不了000,这是我正则的问题,不过反正我最后推翻了正则,网上还有使用正整数除以1一定会整除来做,也就是 number%1 === 0。可是还是有缺陷因为还得判断特殊符号和英文字母,你得确定是数字才行,所以得再加一层。最后我都推翻了,为了跟上潮流!使用es6的isInteger()方法。Number.isInteger()用来判断一个值是否为整数。
价格:(大于零小于十万不超过三位小数)
// 只是截取表单里的item,如果看不懂只能证明你菜得无药可救咯。
<el-form-item
:prop="'form.price"
:rules="priceRule">
<el-input type="text" v-model.number="form.price"></el-input>
</el-form-item>
// data部分
priceRule: [
{ required: true, message: '请输入', trigger: 'blur' },
{
validator(rule, value, callback) {
var reg = /^-?\d{1,5}(?:\.\d{1,3})?$/
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入大于零小于十万不超过三位小数的数字'))
}
},
trigger: 'blur'
}
],
使用了正则,记住很多人喜欢用match()方法,建议放弃使用test方法。