element UI 组件中表单自定义校验规则传递参数

在表单中使用el-input的时候,需要验证一下输入数字的格式,就是整数位限制几位小数位限制几位,项目经理让写一个灵活的方法,哪里都能用,整数位小数位灵活的定义。稍微想了一下,感觉自定义验证方法里面传参就行。

rule:

rule: [{ required: true, validator: validatephone, trigger: "blur" , integer: 8,decimal: 4,}]

方法:

// 数字小数点前后位数
export  const testNumber = (rule,value,callback,)=>{
  /* rule中:
  integer: 8,//整数位
  decimal: 4,//小数位*/
  let newarr = value.toString().split("");
  if(newarr.length >1 && newarr[0] == 0 ) {
    callback(new Error("首位不能为0"));
  } else if(newarr.includes(".")){
    let int = value.toString().split(".")[0];
    let dec = value.toString().split(".")[1];
    if (int.length > rule.integer) {
      callback(new Error("整数位不能大于" + rule.integer + "位"));
    }
    if (dec.length > rule.decimal) {
      callback(new Error("小数位不能大于" + rule.decimal + "位"));
    }
  }else {
    if (value.length > rule.integer) {
      callback(new Error("整数位不能大于" + rule.integer + "位"));
    } else {
      callback();
    }
  }
}

运行效果:

猜你喜欢

转载自blog.csdn.net/galaxyJING/article/details/130291523