直接举例子:
我想写一个需求,要求输入的数据不可为空并且必须保留三位小数:
注意的地方:
1.自定义规则写在data中return的前面。这个其实只是个传参函数
2.表单验证中的trigger和required可以写在自定义规则内也可以直接卸载rules内
上代码:
表单
<el-dialog :visible="replenishmentVisible" title="" width="800px" :close-on-click-modal="false">
<el-form label-position="left" label-width="150px" :model="replenishmentForm" style="margin-left: 20%" :rules="replenishmentRules" ref="replenishmentForm" >
<el-form-item label="充电度数(度):" prop="chargeDegree">
<el-input v-model="replenishmentForm.chargeDegree" style="width: 270px;" placeholder="请输入三位小数的充电度数"></el-input>
</el-form-item>
</el-dialog>
rules
replenishmentRules: {
chargeUnitPrice: [
{ required: true, validator: validatorChargeUnitPrice, trigger: 'blur' }
]
},
date()中
const validatorChargeUnitPrice = (rule, value, callback) => {
let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{3})$/
if (value === '') {
return callback(new Error('电费单价不能为空'))
} else if (!reg.test(value)) {
return callback(new Error('电费单价应该为三位小数'))
} else {
return callback()
}
}
效果
关于正则表达式,推荐链接------------------->
ending,继续加油!