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

最新推荐文章于 2024-10-10 13:13:50 发布

donghua201

最新推荐文章于 2024-10-10 13:13:50 发布

阅读量638

点赞数 9

分类专栏： vue常用业务需求 JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/donghua201/article/details/135270291

版权

vue常用业务需求同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

JavaScript

22 篇文章 0 订阅

订阅专栏

文章介绍了用于验证整数、小数、负数、手机号、车牌号码、金额和百分比的JavaScript验证函数，以及在AntDesign和VbenAdmin框架中的使用示例。

摘要由CSDN通过智能技术生成

常用数值的检验方法：

//整数、小数、负数
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 },
  }]