非负数（0和正数） 限制最大值且保留两位小数，在elementpuls表单中正则自定义验证传更多参数

一、结构

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

二、验证方法：

// 自定义验证方法（**1、自定义验证方法的使用**）
var numbMethod=(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 > 9999.99){
        callback(new Error('数量不能超过9999.99'))
      }
      callback()
    } else if(Number(value) ==0){
      callback()
    } else {
      callback(new Error('请输入正确数字'))
      // callback(new Error('小数点后最多只能输入两位'))
    }
  }
}

// 自定义验证方法（**2、自定义验证且添加除了rule, value, callback以外参数的方法使用**）
// 数值验证0+正数（正整数，正小数）小数点两位小数验证
// maxVal传递最大值参数 
const numberMethod=(rule, value, callback, maxVal)=>{
  const reg = /^(0|[1-9]\d{0,5})(\.\d{1,2})?$/; 
  const strValue = String(value);
  if (!value) {
    callback(new Error('请输入'));
  } else if (isNaN(value)) {
    callback(new Error('请输入正确的数值'));
  } else if (strValue.includes('+')) {
    callback(new Error('输入有误，请不要输入加号'));
  } else {
    const floatValue = parseFloat(value); // 将输入值转换为浮点数
    if (floatValue < 0) {
      callback(new Error('数值不能为负数'));
    } else {
      // 检查小数位数
      const stringValue = value.toString();
      if (stringValue.includes('.')) {
        const decimalPart = stringValue.split('.')[1];
        if (decimalPart.length > 2) {
          callback(new Error('小数点后最多只能输入两位'));
          return;
        }else if(decimalPart.length<1){
          callback(new Error('小数点后不能为空'));
          return;
        }
      }
      // 检查数值范围
      if (floatValue > maxVal) {
        callback(new Error(`数字最大不得超过${maxVal}`));
        return;
      }
      callback();
    }
  }
}

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

rules: {
    number:[{ required: true, validator: numberMethod, trigger: 'blur' }],// 数量 非负数 1、自定义验证方法的使用
    price: [
     {required: true, message: '单价不能为空', trigger: 'blur'},
   	 { required: true, validator:(rule, value, callback) => {priceMethod(rule, value, callback, 9999999.99)}, trigger: 'blur' }// 价格 非负数 2、自定义验证且添加除了rule, value, callback以外参数的方法使用
    ],
    remark:[
      { required: true, message: "请输入", trigger: "blur" },
      {
        min: 1,
        max: 100,
        message: "长度在 1 到 100 个字符",
        trigger: "blur",
      },
    ],
  },