feat(common): ✨ 添加input-rules

2026-03-18 15:52:07 +08:00
parent 0cecc4df11
commit 5851d40d07
7 changed files with 400 additions and 101 deletions
@@ -3,3 +3,4 @@ export * from "./permission";
 export * from "./printer";
 export * from "./time";
 export * from "./timer";
+export * from "./input-rule";
@@ -0,0 +1,163 @@
+/*
+ * @file: /src/input-rule.ts
+ * @description: 限制输入框输入的规则
+ * @author: tsl (randy1924@163.com)
+ * @date: 2026-03-18 13:37:11
+ * @lastModified: 2026-03-18 15:04:44
+ * @lastModifiedBy: tsl (randy1924@163.com)
+ */
+
+export type InputValue = string | number | null;
+export interface InputOptions {
+  min?: number; // 最小值
+  max?: number; // 最大值
+  init?: string | number; // 初始值
+  digits?: number; // 小数位数
+  pattern?: string | RegExp; // 匹配模式
+  required?: boolean; // 是否必填
+  integer?: boolean; // 是否整数
+  number?: boolean; // 是否转成数字
+  text?: boolean; // 是否使用文本模式
+  floor?: boolean; // 是否向下取数
+  ceil?: boolean; // 是否向上取数
+  keepDecimal?: boolean; // 是否保留小数，即使是小数位是0
+  noSign?: boolean; // 不允许输入正负号
+}
+
+/**
+ * 根据规则获取目标值
+ * @example
+ * 限制输入的最小值：0，最大值：99999.99，必填，小数位数：2
+ * const value = getValueOfRule(e.detail.value, {
+ *   min: 0,
+ *   max: 99999.99,
+ *   required: true,
+ *   digits: 2,
+ * })
+ */
+export function getValueOfRule(
+  value: InputValue,
+  options: InputOptions,
+  callback?: (value: InputValue) => void,
+): InputValue {
+  console.log("getValueOfRule", value, options);
+
+  const { text } = options;
+
+  let targetValue: InputValue;
+  if (text) {
+    targetValue = getTextTargetValue(value, options);
+  } else {
+    targetValue = getNumberTargetValue(value, options);
+  }
+
+  console.log("targetValue", targetValue);
+  callback?.(targetValue);
+  return targetValue;
+}
+
+/**
+ * 根据输入的获取处理后值-文本类型
+ */
+function getTextTargetValue(innerValue: InputValue, options: InputOptions): InputValue {
+  const { required, init, pattern, number } = options;
+
+  innerValue ??= "";
+
+  innerValue = String(innerValue);
+  let targetValue: string | number = innerValue;
+
+  // 如果提供了pattern参数，检查输入是否匹配该模式
+  if (pattern && !new RegExp(pattern).test(innerValue)) {
+    return "";
+  }
+
+  if (!/^[+-]?\d+(\.\d+)?$/.test(innerValue)) {
+    if (required) {
+      if (init !== undefined) {
+        targetValue = String(init);
+      }
+    }
+  }
+
+  if (number) {
+    targetValue = Number(targetValue);
+  }
+
+  return targetValue;
+}
+
+/**
+ * 根据 floor/ceil 选项选择取整方式
+ */
+function getRoundFn(floor?: boolean, ceil?: boolean): (n: number) => number {
+  if (floor) return Math.floor;
+  if (ceil) return Math.ceil;
+  return Math.round;
+}
+
+/**
+ * 判断字符串是否为合法数字输入
+ */
+function isValidNumberInput(value: string, noSign?: boolean): boolean {
+  if (!value) return false;
+  if (!/^[+-]?\d+(\.\d+)?$/.test(value)) return false;
+  if (noSign && /[+-]/.test(value)) return false;
+  return true;
+}
+
+/**
+ * 获取非法输入时的回退值
+ */
+function getFallbackValue(options: InputOptions): string {
+  const { required, init, min } = options;
+  if (!required) return "";
+  if (init != null) return String(init);
+  return min == null ? "0" : String(min);
+}
+
+/**
+ * 对数字应用精度和取整处理
+ */
+function applyPrecision(num: number, options: InputOptions): number {
+  const { digits, integer, floor, ceil, min, max } = options;
+  let result = num;
+
+  if (min != null) result = Math.max(result, min);
+  if (max != null) result = Math.min(result, max);
+
+  const roundFn = getRoundFn(floor, ceil);
+
+  if (digits != null) {
+    const precision = Math.pow(10, digits);
+    result = roundFn(result * precision) / precision;
+  }
+
+  if (integer) {
+    result = roundFn(result);
+  }
+
+  return result;
+}
+
+/**
+ * 根据输入的获取处理后值-数字类型
+ */
+function getNumberTargetValue(innerValue: InputValue, options: InputOptions): InputValue {
+  const { number, keepDecimal, noSign, digits } = options;
+  const strValue = String(innerValue ?? "");
+
+  let targetValue: string;
+
+  if (isValidNumberInput(strValue, noSign)) {
+    targetValue = String(applyPrecision(Number(strValue), options));
+  } else {
+    targetValue = getFallbackValue(options);
+  }
+
+  if (digits != null && keepDecimal) {
+    targetValue = Number(targetValue).toFixed(digits);
+  }
+
+  return number ? Number(targetValue) : targetValue;
+}
@@ -0,0 +1,166 @@
+import { test, expect, describe } from "@jest/globals";
+import { getValueOfRule, InputOptions } from "../src/input-rule";
+
+describe("getValueOfRule - 文本模式 (text: true)", () => {
+  const textOpts: InputOptions = { text: true };
+
+  test("普通文本直接返回", () => {
+    expect(getValueOfRule("hello", { ...textOpts })).toBe("hello");
+  });
+
+  test("null 值返回空字符串", () => {
+    expect(getValueOfRule(null, { ...textOpts })).toBe("");
+  });
+
+  test("required + init：非数字文本回退到 init", () => {
+    expect(getValueOfRule("abc", { ...textOpts, required: true, init: "默认" })).toBe("默认");
+  });
+
+  test("required 无 init：非数字文本保持原值", () => {
+    expect(getValueOfRule("abc", { ...textOpts, required: true })).toBe("abc");
+  });
+
+  test("number 选项将结果转为数字", () => {
+    expect(getValueOfRule("123", { ...textOpts, number: true })).toBe(123);
+  });
+
+  test("pattern 匹配失败返回空字符串", () => {
+    expect(getValueOfRule("abc", { ...textOpts, pattern: "^\\d+$" })).toBe("");
+  });
+
+  test("pattern 匹配成功返回原值", () => {
+    expect(getValueOfRule("123", { ...textOpts, pattern: "^\\d+$" })).toBe("123");
+  });
+});
+
+describe("getValueOfRule - 数字模式", () => {
+  test("正常数字字符串返回字符串", () => {
+    expect(getValueOfRule("42", {})).toBe("42");
+  });
+
+  test("number 选项返回数字类型", () => {
+    expect(getValueOfRule("42", { number: true })).toBe(42);
+  });
+
+  test("非法输入 + required 回退到 init", () => {
+    expect(getValueOfRule("abc", { required: true, init: 10 })).toBe("10");
+  });
+
+  test("非法输入 + required 无 init 回退到 min", () => {
+    expect(getValueOfRule("abc", { required: true, min: 5 })).toBe("5");
+  });
+
+  test("非法输入 + required 无 init 无 min 回退到 0", () => {
+    expect(getValueOfRule("abc", { required: true })).toBe("0");
+  });
+
+  test("非法输入 + 非 required 返回空字符串", () => {
+    expect(getValueOfRule("abc", {})).toBe("");
+  });
+
+  test("null 值 + required 回退到 init", () => {
+    expect(getValueOfRule(null, { required: true, init: 0 })).toBe("0");
+  });
+
+  test("null 值 + 非 required 返回空字符串", () => {
+    expect(getValueOfRule(null, {})).toBe("");
+  });
+});
+
+describe("getValueOfRule - min/max 限制", () => {
+  test("值小于 min 时限制为 min", () => {
+    expect(getValueOfRule("3", { min: 5 })).toBe("5");
+  });
+
+  test("值大于 max 时限制为 max", () => {
+    expect(getValueOfRule("100", { max: 50 })).toBe("50");
+  });
+
+  test("值在 min/max 范围内保持不变", () => {
+    expect(getValueOfRule("25", { min: 0, max: 50 })).toBe("25");
+  });
+
+  test("负数受 min 限制", () => {
+    expect(getValueOfRule("-10", { min: 0 })).toBe("0");
+  });
+});
+
+describe("getValueOfRule - digits 小数位数", () => {
+  test("保留 2 位小数（四舍五入）", () => {
+    expect(getValueOfRule("3.456", { digits: 2 })).toBe("3.46");
+  });
+
+  test("保留 0 位小数", () => {
+    expect(getValueOfRule("3.6", { digits: 0 })).toBe("4");
+  });
+
+  test("floor 向下取整小数", () => {
+    expect(getValueOfRule("3.456", { digits: 2, floor: true })).toBe("3.45");
+  });
+
+  test("ceil 向上取整小数", () => {
+    expect(getValueOfRule("3.451", { digits: 2, ceil: true })).toBe("3.46");
+  });
+
+  test("keepDecimal 保留尾部零", () => {
+    expect(getValueOfRule("3", { digits: 2, keepDecimal: true })).toBe("3.00");
+  });
+
+  test("keepDecimal + number 返回数字类型", () => {
+    expect(getValueOfRule("3.10", { digits: 2, keepDecimal: true, number: true })).toBe(3.1);
+  });
+});
+
+describe("getValueOfRule - integer 整数模式", () => {
+  test("integer 四舍五入取整", () => {
+    expect(getValueOfRule("3.6", { integer: true })).toBe("4");
+  });
+
+  test("integer + floor 向下取整", () => {
+    expect(getValueOfRule("3.9", { integer: true, floor: true })).toBe("3");
+  });
+
+  test("integer + ceil 向上取整", () => {
+    expect(getValueOfRule("3.1", { integer: true, ceil: true })).toBe("4");
+  });
+});
+
+describe("getValueOfRule - noSign 不允许正负号", () => {
+  test("带正号的输入被视为非法", () => {
+    expect(getValueOfRule("+5", { noSign: true, required: true, init: 0 })).toBe("0");
+  });
+
+  test("带负号的输入被视为非法", () => {
+    expect(getValueOfRule("-5", { noSign: true, required: true, init: 0 })).toBe("0");
+  });
+
+  test("无符号数字正常通过", () => {
+    expect(getValueOfRule("5", { noSign: true })).toBe("5");
+  });
+});
+
+describe("getValueOfRule - callback", () => {
+  test("callback 接收最终处理后的值", () => {
+    let received: unknown;
+    getValueOfRule("42", { number: true }, (v) => { received = v; });
+    expect(received).toBe(42);
+  });
+});
+
+describe("getValueOfRule - 综合场景", () => {
+  test("限制输入 min:0, max:99999.99, required, digits:2", () => {
+    expect(getValueOfRule("100.456", { min: 0, max: 99999.99, required: true, digits: 2 })).toBe("100.46");
+  });
+
+  test("超出 max 时截断到 max", () => {
+    expect(getValueOfRule("100000", { min: 0, max: 99999.99, required: true, digits: 2 })).toBe("99999.99");
+  });
+
+  test("空输入 required 回退到 min", () => {
+    expect(getValueOfRule("", { min: 0, max: 99999.99, required: true, digits: 2 })).toBe("0");
+  });
+
+  test("负数输入限制到 min:0", () => {
+    expect(getValueOfRule("-5", { min: 0, max: 100, required: true })).toBe("0");
+  });
+});