antdesign的多个form表单校验

一、表单

<a-form
            :ref="el => setSwipeCellRef(el, '名字根据自己情况取')"
            :rules="formModel.topTop.formRules"
            :model="formModel.topTop.formModel"
            :label-col="{ span: 8 }">




formRules: computed(() => {
            let rules: any = {};
            for (let i in state.formModel.topTop.formModel) {
              rules[i] = state.formModel.topTop.formModel[i]?.rules
            }
            return rules
          }),

二、setSwipeCellRef

setSwipeCellRef(el, index) {
        if (el) {
          swipeCellRefList.value[index] = el;
        }
      },

三、统一校验时

let flag;
        for(let key in swipeCellRefList.value){
          flag = await swipeCellRefList.value[key].validate()
        }
        if (!flag) return;

四、重置校验信息等

cancelLayer(){;
        for(let key in swipeCellRefList.value){
          swipeCellRefList.value[key].clearValidate()//重置校验信息
        }
        for(let key in state.formModel){
          resetForm(state.formModel[key].formModel)//此方法自己写的，用于重置值
        }
      },

// 重置表单
export const resetForm = (formModel: any) => {
  for (let i in formModel) {
    let type = Object.prototype.toString.call(formModel[i].value).slice(8, -1);
    if (type === "String") {
      formModel[i].value = formModel[i].defaultValue || null;
    } else if (type === "Array") {
      formModel[i].value = formModel[i].defaultValue || [];
    } else if (type === "Object") {
      formModel[i].value = formModel[i].defaultValue || null;
    } else if (type === "Number") {
      formModel[i].value = formModel[i].defaultValue || null;
    } else if (type === "Boolean") {
      formModel[i].value = formModel[i].defaultValue || false;
    }
  }
};

五、自定义校验（eg：正则校验）

1.小例：手机号校验

phone: {
          label: '电话',
          value: '',
          defaultValue: '',
          placeholder:'请输入',
          type: 'a-input',
          rules: <Rule>[{required: true,validator:validReg,trigger:'blur',pattern:regPhone,message:'请输入正确的电话格式'}],
        },



……


export const validReg = (_rule, item: any) => {
    if (
      item.value === "" ||
      item.value === null ||
      item.value === undefined ||
      item.value.length === 0
    ) {
      if(_rule.required) {
        return Promise.reject("不能为空");
      }
    }else{
      if(!_rule.pattern.test(item.value)) return Promise.reject(item.message || '请输入正确的格式~')
    }
  return Promise.resolve();
};

2.经纬度校验及非空校验

lnglat: {
          label: '经纬度',
          value: '',
          defaultValue: '',
          placeholder:'点击按钮选择..',
          type: 'a-input-search',
          rules: <Rule>[
            {required: true，validator: validEmptyAndLngLat},
          ],
        },



export const validEmptyAndLngLat = (_rule: Rule, item: any) => {
  function validateCoordinate(type, value) {
    function validate(value, coordinateRange) {
      const numericValue = parseFloat(value);
      return (
        numericValue >= coordinateRange[0] && numericValue <= coordinateRange[1]
      );
    }
    let valueArr = value.split(",");
    if (valueArr.length < 2) {
      return false;
    } else {
      let lngFlag = validate(valueArr[0], [-180, 180]);
      let latFlag = validate(valueArr[1], [-90, 90]);
      return lngFlag && latFlag;
    }
  }
  // 若value值为0，则下列规则无法通过
  if (
    item.value === "" ||
    item.value === null ||
    item.value === undefined ||
    item.value.length === 0
  ) {
    return Promise.reject("不能为空");
  } else {
    if (!item.value || !validateCoordinate("longitude", item.value)) {
      return Promise.reject("经纬度不合法");
    }
  }
  return Promise.resolve();
};

原文地址：https://blog.csdn.net/weixin_59017683/article/details/140719841

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！