Ant Design表单项常用的检验方法

常用数值的检验方法：

//整数、小数、负数
export const validatorNumWithDecAndMinus = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    const regx = /^(\-?[0-9]*)(\.\d{1,2})?$/;
    if (!regx.test(value)) {
      return Promise.reject('请输入正确数值');
    }
  }
};
//整数和小数（两位小数）
export const validatorNumWithDec = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    const regx = /^(0|[1-9][0-9]*)(\.\d{1,2})?$/;
    if (!regx.test(value)) {
      return Promise.reject('请输入正确数值');
    }
  }
};
//整数和小数（三位小数）
export const validatorNumWithDecOfThreeDecimalPlaces = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    const regx = /^(0|[1-9][0-9]*)(\.\d{1,3})?$/;
    if (!regx.test(value)) {
      return Promise.reject('请输入正确数值');
    }
  }
};
//整数
export const validatorNum = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    const regx = /^(0|[1-9][0-9]*)$/;
    if (!regx.test(value)) {
      return Promise.reject('请输入正确整数');
    }
  }
};

//整数和小数（不限小数位数）
export const validatorAllNum = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    const regx = /^(0|[1-9][0-9]*)(\.\d+)?$/;
    if (!regx.test(value)) {
      return Promise.reject('请输入正确数值');
    }
  }
};

//手机
export const validatorPhone = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    // const regx = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
    const regx = new RegExp(/^1[3456789]\d{9}$/);
    if (!regx.test(value)) {
      return Promise.reject('请输入正确的手机号码');
    }
  }
};

// 车牌号码
export const validatorCarNumber = async (rule, value) => {
  if (value) {
    value = value.toString().trim();
    const regx =
      /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/;
    if (!regx.test(value)) {
      return Promise.reject('请输入正确的车牌号码');
    }
  }
};
//金额
export const validatorMoney = async (rule, value) => {
  if (value) {
    value = value.toString();
    const regNum1 = /[^\d.]/g;
    const regNum2 = /\.{2,}/g;
    const dotIndex = value.indexOf('.');
    if (regNum1.test(value)) {
      return Promise.reject('请输入数值');
    } else if (regNum2.test(value)) {
      return Promise.reject('请输入一个小数点');
    } else if (dotIndex == 0 || (dotIndex > 0 && dotIndex + 3 < value.length)) {
      return Promise.reject('请输入两位小数的数值');
    }
  }
};
// 百分比
export const validatorPercent = async (rule, value) => {
  if (value) {
    value = value.toString();
    const regNum1 = /[^\d.]/g;
    const regNum2 = /\.{2,}/g;
    const dotIndex = value.indexOf('.');
    if (regNum1.test(value)) {
      return Promise.reject('请输入数值');
    } else if (regNum2.test(value)) {
      return Promise.reject('请输入一个小数点');
    } else if (dotIndex == 0 || (dotIndex > 0 && dotIndex + 3 < value.length)) {
      return Promise.reject('请输入两位小数');
    } else if (Number(value) > 100) {
      return Promise.reject('请输入小于等于100的数字');
    }
  }
};

使用场景：

1、ant design的使用方法

//ant design的使用方法
<a-form-model
  ref="form"
  :rules="rules"
  :model="form"
  layout="inline"
  :label-col="{span: 10}"
  :wrapper-col="{span: 14}"
>
  <a-form-model-item
    label="车牌号"
    prop="carNumber"
    class="w300"
  >
    <a-input
      v-model="form.carNumber"
    />
  </a-form-model-item>
  ......
</a-form-model>

const rules = {
  carNumber: [{ validator: validatorCarNumber , tirgger: 'change', required: true,}]
}

2、Vben Admin框架的使用方法 

//Vben Admin框架的使用方法
export const schemasOfUpdateModal: FormSchema[] = [
  {
    label: '车牌号码',
    field: 'carNumber',
    component: 'Input',
    required: true,
    rules: [{ validator: validatorCarNumber }, { required: true }],
    colProps: { span: 12 },
  },
  {
    label: '工人名字',
    field: 'nickName',
    component: 'Input',
    show: false,
    colProps: { span: 12 },
  },
  {
    label: '车皮',
    field: 'carSkin',
    component: 'Input',
    componentProps: {
      suffix: '吨',
    },
    rules: [{ validator: validatorNumWithDecOfThreeDecimalPlaces }, { required: true }],
    colProps: { span: 12 },
  }]