前端vue+element使用validator来自定义表单验证（保留三位小数）

直接举例子：

我想写一个需求，要求输入的数据不可为空并且必须保留三位小数：

注意的地方：

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，继续加油！