非负数、0和正数 限制最大值且保留两位小数在elementpuls表单中正则验证

一、结构

<el-form-item label="单价：" prop="price">
            <el-input
              v-model.trim="formData.price"
              placeholder="请输入"
              @blur="formMethod.fixTwo"
            ><template #append>(元)</template></el-input>
          </el-form-item>

二、验证方法：

//@blur="formMethod.fixTwo"的方法保证两位小数
fixTwo:(val)=>{
    let centerNum = Number(val.target.value)
    if(val.target.value == 0 || val.target.value == "0"){
        val.target.value == 0
    }else if(centerNum >= 0){
      val.target.value = centerNum.toFixed(2)
    }
  },

// 验证0和正整数
var numberMethod=(rule, value, callback)=>{
   const reg = /^[0-9]+$/;
  if (!value) {
    callback(new Error('请输入'))
  } else {
    if (reg.test(value)) {
      if(value > 9999999.99){
        callback(new Error('数字最大不得超过9999999.99'))
      }
      callback()
    } else {
      callback(new Error('请输入正确数字'))
    }
  }
}


// 验证非负数（0+正数）
var priceMethod=(rule, value, callback)=>{
  const reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/; //非负数/^\d+.?\d{0,2}$/;
  if (!value) {
    callback(new Error('请输入'))
  } else if (!Number(value) && value!="0"&&value!=0) {
    callback(new Error('请输入数字值'))
  } else {
    if (reg.test(value)) {
      if(value > 9999999.99){
        callback(new Error('数字最大不得超过9999999.99'))
      }
      callback()
    } else if(Number(value) ==0){
      callback()
    } else {
      callback(new Error('请输入正确数字'))
      // callback(new Error('小数点后最多只能输入两位'))
    }
  }
}

三、在elementplus表单验证中调用验证方法：

rules: {
    number:[{ required: true, validator: numberMethod, trigger: 'blur' }],// 数量 0+正整数
    price: [{ required: true, validator: priceMethod, trigger: 'blur' }],// 价格 非负数
    amount:[{ required: true, validator: priceMethod, trigger: 'blur' }],// 金额 非负数
    remark:[
      { required: true, message: "请输入", trigger: "blur" },
      {
        min: 1,
        max: 100,
        message: "长度在 1 到 100 个字符",
        trigger: "blur",
      },
    ],
  },