antd input-number 数字输入正则校验

ant-design-vue 数字输入组件的常用校验方法
可以把校验方法单独抽离出来放在公共的文件里,方便复用
这里整理了两种数字输入校验方法, 第一种是输入时,检测到输入内容不匹配,去掉不匹配的输入内容 第二种是,通过 form 表单的 rules 校验,不匹配的就提示输入内容不合格
antd 提供的 input-number 组件已经帮我们处理的不是数字输入的内容,基本只需要处理数字的展示和位数限制就可以了
效果图:   完整代码:

<template>
  <div>
    <h3>数字输入组件(改变输入内容)</h3>
    <p>
      inputnumber数字输入组件自带的会处理输入不是数字和输入多个小数点的情况,这里的正则加入了小数点个数的处理,不要也可以,因为组件已经帮我们处理了
    </p>
    <div class="date-box">
      <div class="item">
        <h3>数字输入,自动添加小数点</h3>
        <a-input-number
          :min="0"
          :max="9999"
          :precision="2"
          style="width: 70%"
        />
      </div>
      <div class="item">
        <h3>数字输入,每3位添加逗号分隔符,小数位数不超过2</h3>
        <a-input-number
          :min="0"
          :max="9999999999"
          :precision="2"
          :formatter="numberFormat"
          :parser="toNumberFormat"
          style="width: 70%"
        />
      </div>
      <div class="item">
        <h3>数字输入,每3位添加逗号分隔符,小数不处理</h3>
        <a-input-number
          :min="0"
          :max="9999999999"
          :formatter="numberDotFormat"
          :parser="toNumberFormat"
          style="width: 70%"
        />
      </div>
      <div class="item">
        <h3>数字输入,只能输入一个小数点</h3>
        <a-input-number
          :min="0"
          :max="9999999999"
          :formatter="numberDotOneFormat"
          :parser="toNumberFormat"
          style="width: 70%"
        />
      </div>
    </div>
    <h3>数字输入组件(form表单校验提示)</h3>
    <a-form
      ref="formRef"
      name="dynamic_form_item"
      :model="info"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
    >
      <div class="date-box">
        <div class="item">
          <h3>只能输入整数(四舍五入)</h3>
          <a-form-item label="数字1" name="number1">
            <a-input-number
              v-model:value="info.number1"
              :min="0"
              :max="9999"
              :precision="0"
              style="width: 70%"
            />
          </a-form-item>
        </div>
        <div class="item">
          <h3>只能输入整数(不改变,提示)</h3>
          <a-form-item label="数字2" name="number2">
            <a-input-number
              v-model:value="info.number2"
              :min="0"
              :max="9999"
              style="width: 70%"
            />
          </a-form-item>
        </div>
        <div class="item">
          <h3>只能输入整数和小数,小数位数不超过3</h3>
          <a-form-item label="数字3" name="number3">
            <a-input-number
              v-model:value="info.number3"
              :min="0"
              :max="9999"
              style="width: 70%"
            />
          </a-form-item>
        </div>
      </div>
      <div><a-button type="primary" @click="submit">保存</a-button></div>
    </a-form>
  </div>
</template>

<script>
import {
  numberFormat,
  toNumberFormat,
  numberDotFormat,
  numberDotOneFormat,
  initNumberReg,
  initDotNumberReg,
} from "@/utils";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";

export default {
  name: "numberInput",
  setup() {
    const info = reactive({
      number1: null,
      number2: null,
      number3: null,
    });
    const formRef = ref(null);
    const rules = {
      number1: [{ required: true, trigger: "blur", message: "请输入数字" }],
      number2: [
        { required: true, trigger: "blur", message: "请输入数字" },
        initNumberReg,
      ],
      number3: [
        { required: true, trigger: "blur", message: "请输入数字" },
        initDotNumberReg,
      ],
    };
    const submit = () => {
      formRef.value.validateFields().then(() => {
        console.log(info);
        message.success("success");
      });
    };
    return {
      numberFormat,
      toNumberFormat,
      numberDotFormat,
      numberDotOneFormat,
      info,
      formRef,
      rules,
      submit,
    };
  },
};
</script>

<style scoped>
.date-box {
  display: flex;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.date-box .item {
  width: 45%;
  margin-bottom: 12px;
}
</style>

// 常用数据转换

// 数字输入,每3位添加逗号分隔符
export const numberFormat = (value) => {
  if (value) {
    return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  } else {
    return value;
  }
};
export const toNumberFormat = (value) => {
  if (value) {
    return value.replace(/\$\s?|(,*)/g, "");
  } else {
    return value;
  }
};

// 数字输入,每3位添加逗号分隔符,小数不处理
export const numberDotFormat = (value) => {
  if (value) {
    // 有小数点
    if (String(value).indexOf(".") > 0) {
      return value.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
    } else {
      // 无小数点
      return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  } else {
    return value;
  }
};
// 数字输入,每3位添加逗号分隔符,只能输入一个小数点
export const numberDotOneFormat = (value) => {
  if (value) {
    const reg = /^(-)*(\d+)\.(\d).*$/;
    // 有小数点
    if (String(value).indexOf(".") > 0) {
      return value.replace(/(?!^)(?=(\d{3})+\.)/g, ",").replace(reg, "$1$2.$3");
    } else {
      // 无小数点
      return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  } else {
    return value;
  }
};

// 正则校验
// 只能输入整数
export const initNumberReg = {
  pattern: /^[0-9]+\d*$/,
  message: "只能输入整数",
};
// 只能输入整数或小数
export const initDotNumberReg = {
  pattern: /^\d+(\.[0-9]{1,3}){0,1}$/,
  message: "只能输入整数或小数,小数位数不超过3",
};