字段验证

本指南介绍如何在 Kinlink 中实现字段验证,包括基础验证、复杂验证规则和异步验证。

基础验证

了解如何添加基本的字段验证规则,如格式验证、必填验证等。

JavaScript
// 基础验证示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    
    // 添加邮箱验证
    form.addFieldValidator('邮箱', (value) => {
      if (!value) return;
      if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
        return '请输入有效的邮箱地址';
      }
      return undefined; // 验证通过
    });
    
    // 添加手机号验证
    form.addFieldValidator('手机号', (value) => {
      if (!value) return;
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return '请输入有效的手机号码';
      }
      return undefined;
    });
  });
})();

复杂验证

学习如何实现更复杂的验证逻辑,如字段间的关联验证、条件验证等。

JavaScript
// 复杂验证示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    
    // 日期范围验证
    form.addFieldValidator('开始日期', (value) => {
      if (!value) return;
      const endDate = form.getFieldValue('结束日期');
      if (endDate && new Date(value) > new Date(endDate)) {
        return '开始日期不能晚于结束日期';
      }
      return undefined;
    });
    
    // 金额验证
    form.addFieldValidator('申请金额', (value) => {
      if (!value) return;
      const amount = parseFloat(value);
      if (isNaN(amount) || amount <= 0) {
        return '请输入有效的金额';
      }
      if (amount > 100000) {
        return '单次申请金额不能超过100000';
      }
      return undefined;
    });
  });
  
  // 监听字段变化重新触发验证
  kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
    const { fieldName } = data;
    const form = kinlink.formApi;
    
    if (fieldName === '结束日期') {
      form.validateField('开始日期');
    }
  });
})();

异步验证

了解如何实现需要调用外部 API 的异步验证逻辑。

JavaScript
// 异步验证示例
(function() {
  // 模拟API调用
  async function checkUserExists(email) {
    try {
      const response = await fetch(`/api/check-user?email=${email}`);
      const data = await response.json();
      return data.exists;
    } catch (error) {
      console.error('验证出错:', error);
      return false;
    }
  }

  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    
    // 添加异步邮箱验证
    form.addFieldValidator('用户邮箱', async (value) => {
      if (!value) return;
      
      // 基础格式验证
      if (!/^\w+@\w+\.\w+$/.test(value)) {
        return '请输入有效的邮箱地址';
      }
      
      // 检查邮箱是否已存在
      const exists = await checkUserExists(value);
      if (exists) {
        return '该邮箱已被使用';
      }
      
      return undefined;
    });
  });
})();

验证类型

  • 格式验证
  • 范围验证
  • 关联字段验证
  • 异步验证

最佳实践

  • 合理使用错误提示
  • 处理异步验证超时
  • 避免过于复杂的验证逻辑
  • 注意验证性能

提示

  • 验证函数返回 undefined 表示验证通过
  • 返回字符串表示验证失败,字符串内容会显示为错误提示
  • 异步验证应该考虑添加加载状态提示
  • 验证错误会自动显示在字段下方

相关资源