解决方案

完整校验工具类

/**
 * 数据校验工具类
 */
export class Validator {
  /**
   * 是否为空
   */
  static isEmpty(value: string | null | undefined): boolean {
    return value === null || value === undefined || value.trim() === '';
  }

  /**
   * 必填校验
   */
  static required(value: string, fieldName: string = '此项'): string | null {
    if (this.isEmpty(value)) {
      return `${fieldName}不能为空`;
    }
    return null;
  }

  /**
   * 长度校验
   */
  static length(value: string, min: number, max: number, fieldName: string = '此项'): string | null {
    if (this.isEmpty(value)) {
      return null; // 空值由required校验
    }

    const len = value.trim().length;
    if (len < min) {
      return `${fieldName}不能少于${min}个字符`;
    }
    if (len > max) {
      return `${fieldName}不能超过${max}个字符`;
    }
    return null;
  }

  /**
   * 数字范围校验
   */
  static range(value: number, min: number, max: number, fieldName: string = '数值'): string | null {
    if (value < min || value > max) {
      return `${fieldName}必须在${min}-${max}之间`;
    }
    return null;
  }

  /**
   * 手机号校验
   */
  static phone(value: string): string | null {
    const pattern = /^1[3-9]\d{9}$/;
    if (!pattern.test(value)) {
      return '手机号格式不正确';
    }
    return null;
  }

  /**
   * 邮箱校验
   */
  static email(value: string): string | null {
    const pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!pattern.test(value)) {
      return '邮箱格式不正确';
    }
    return null;
  }

  /**
   * 身份证校验
   */
  static idCard(value: string): string | null {
    const pattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
    if (!pattern.test(value)) {
      return '身份证号格式不正确';
    }
    return null;
  }

  /**
   * 日期校验(不能晚于今天)
   */
  static dateNotFuture(timestamp: number): string | null {
    if (timestamp > Date.now()) {
      return '日期不能晚于今天';
    }
    return null;
  }

  /**
   * 日期范围校验
   */
  static dateRange(startTime: number, endTime: number): string | null {
    if (startTime >= endTime) {
      return '开始时间必须早于结束时间';
    }
    return null;
  }

  /**
   * 组合校验
   */
  static validate(value: string, rules: ValidationRule[]): string | null {
    for (const rule of rules) {
      const error = rule(value);
      if (error) {
        return error;
      }
    }
    return null;
  }
}

// 校验规则类型
type ValidationRule = (value: string) => string | null;

使用示例

/**
 * 物品编辑页面
 */
@Component
struct ItemEditPage {
  @State itemName: string = '';
  @State itemDesc: string = '';
  @State expiryDays: number = 30;

  @State nameError: string = '';
  @State descError: string = '';
  @State daysError: string = '';

  /**
   * 实时校验名称
   */
  onNameChange(value: string): void {
    this.itemName = value;

    // ✅ 组合校验
    this.nameError = Validator.validate(value, [
      (v) => Validator.required(v, '物品名称'),
      (v) => Validator.length(v, 1, 50, '物品名称')
    ]) || '';
  }

  /**
   * 失焦校验描述
   */
  onDescBlur(): void {
    this.descError = Validator.length(this.itemDesc, 0, 200, '描述') || '';
  }

  /**
   * 校验天数
   */
  onDaysChange(value: number): void {
    this.expiryDays = value;
    this.daysError = Validator.range(value, 1, 3650, '有效天数') || '';
  }

  /**
   * 提交前完整校验
   */
  async onSubmit(): Promise<void> {
    // ✅ 校验所有字段
    const errors: string[] = [];

    const nameErr = Validator.validate(this.itemName, [
      (v) => Validator.required(v, '物品名称'),
      (v) => Validator.length(v, 1, 50, '物品名称')
    ]);
    if (nameErr) errors.push(nameErr);

    const descErr = Validator.length(this.itemDesc, 0, 200, '描述');
    if (descErr) errors.push(descErr);

    const daysErr = Validator.range(this.expiryDays, 1, 3650, '有效天数');
    if (daysErr) errors.push(daysErr);

    // ✅ 有错误则提示
    if (errors.length > 0) {
      promptAction.showToast({
        message: errors[0] // 显示第一个错误
      });
      return;
    }

    // ✅ 校验通过,保存数据
    await this.saveData();
  }

  build() {
    Column({ space: 16 }) {
      // 物品名称
      Column({ space: 4 }) {
        TextInput({ placeholder: '请输入物品名称' })
          .onChange((value) => {
            this.onNameChange(value);
          });

        if (this.nameError) {
          Text(this.nameError)
            .fontSize(12)
            .fontColor(Color.Red);
        }
      }
      .alignItems(HorizontalAlign.Start)

      // 描述
      Column({ space: 4 }) {
        TextArea({ placeholder: '请输入描述(可选)' })
          .onChange((value) => {
            this.itemDesc = value;
          })
          .onBlur(() => {
            this.onDescBlur();
          });

        if (this.descError) {
          Text(this.descError)
            .fontSize(12)
            .fontColor(Color.Red);
        }
      }
      .alignItems(HorizontalAlign.Start)

      // 提交按钮
      Button('保存')
        .onClick(() => {
          this.onSubmit();
        });
    }
    .padding(16)
  }
}

高级校验器

/**
 * 高级校验器
 */
export class AdvancedValidator {
  /**
   * 自定义正则校验
   */
  static pattern(value: string, regex: RegExp, message: string): string | null {
    if (!regex.test(value)) {
      return message;
    }
    return null;
  }

  /**
   * 唯一性校验(异步)
   */
  static async unique(value: string, checkFn: (v: string) => Promise<boolean>, fieldName: string): Promise<string | null> {
    const exists = await checkFn(value);
    if (exists) {
      return `${fieldName}已存在`;
    }
    return null;
  }

  /**
   * 密码强度校验
   */
  static passwordStrength(password: string): string | null {
    if (password.length < 8) {
      return '密码长度不能少于8位';
    }

    const hasNumber = /\d/.test(password);
    const hasLetter = /[a-zA-Z]/.test(password);
    const hasSpecial = /[!@#$%^&*()]/.test(password);

    if (!hasNumber || !hasLetter) {
      return '密码必须包含字母和数字';
    }

    return null;
  }

  /**
   * 两次密码一致性校验
   */
  static passwordMatch(password: string, confirmPassword: string): string | null {
    if (password !== confirmPassword) {
      return '两次密码不一致';
    }
    return null;
  }
}

// 使用唯一性校验
async function checkNameUnique(): Promise<void> {
  const error = await AdvancedValidator.unique(
    this.itemName,
    async (name) => {
      const count = await ItemDao.countByName(name);
      return count > 0;
    },
    '物品名称'
  );

  if (error) {
    this.nameError = error;
  }
}

关键要点

1. 校验时机

// ✅ 实时校验(输入时)
.onChange((value) => {
  this.validate(value);
})

// ✅ 失焦校验(离开输入框时)
.onBlur(() => {
  this.validate();
})

// ✅ 提交校验(点击按钮时)
.onClick(() => {
  if (this.validateAll()) {
    this.submit();
  }
})

2. 错误显示

// ✅ 推荐:字段下方显示错误
Column() {
  TextInput();
  if (this.error) {
    Text(this.error).fontColor(Color.Red);
  }
}

// ✅ 推荐:Toast提示
promptAction.showToast({ message: error });

3. 校验规则复用

// ✅ 定义常用规则
const NameRules: ValidationRule[] = [
  (v) => Validator.required(v, '名称'),
  (v) => Validator.length(v, 1, 50, '名称')
];

const PhoneRules: ValidationRule[] = [
  (v) => Validator.required(v, '手机号'),
  (v) => Validator.phone(v)
];

// 复用
Validator.validate(name, NameRules);
Validator.validate(phone, PhoneRules);

最佳实践

✅ 提供友好的错误提示 ✅ 实时反馈校验结果 ✅ 组合多个校验规则 ✅ 封装常用校验方法 ✅ 异步校验用户体验