自定义验证示例

本页面展示如何使用 Kinlink API 实现各种自定义验证规则,包括基础验证、跨字段验证和异步验证。

基础验证

展示基本的字段验证规则实现,包括格式验证和复杂规则验证。

JavaScript
// 基础验证示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    
    // 手机号验证
    form.addFieldValidator('手机号', (value) => {
      if (!value) return;
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return '请输入有效的手机号码';
      }
      return undefined;
    });
    
    // 密码强度验证
    form.addFieldValidator('密码', (value) => {
      if (!value) return;
      if (value.length < 8) {
        return '密码长度不能少于8位';
      }
      if (!/[A-Z]/.test(value)) {
        return '密码必须包含大写字母';
      }
      if (!/[a-z]/.test(value)) {
        return '密码必须包含小写字母';
      }
      if (!/\d/.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 startDate = form.getFieldValue('开始日期');
      if (startDate && new Date(value) < new Date(startDate)) {
        return '结束日期不能早于开始日期';
      }
      return undefined;
    });
  });
  
  // 当日期变化时重新验证另一个日期字段
  kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
    const { fieldName } = data;
    const form = kinlink.formApi;
    
    if (fieldName === '开始日期') {
      form.validateField('结束日期');
    } else if (fieldName === '结束日期') {
      form.validateField('开始日期');
    }
  });
})();

异步验证

展示如何实现需要调用外部 API 的异步验证规则。

JavaScript
// 异步验证示例
(function() {
  // 模拟远程验证
  async function checkEmailExists(email) {
    try {
      const response = await fetch(`/api/check-email?email=${encodeURIComponent(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+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
        return '请输入有效的邮箱地址';
      }
      
      try {
        // 显示加载状态
        form.showMessage('info', '正在验证邮箱...');
        
        // 检查邮箱是否已存在
        const exists = await checkEmailExists(value);
        if (exists) {
          return '该邮箱已被使用';
        }
        
        form.showMessage('success', '邮箱可用');
        return undefined;
      } catch (error) {
        return '验证失败,请稍后重试';
      }
    });
  });
})();

验证类型

  • 格式验证
  • 跨字段验证
  • 异步验证
  • 复杂规则验证

实现技巧

  • 合理使用正则表达式
  • 处理异步操作超时
  • 提供友好的错误提示
  • 优化验证性能

注意事项

  • 验证规则应该考虑空值情况
  • 异步验证需要处理网络错误
  • 避免过于复杂的验证逻辑
  • 注意验证规则的性能影响

相关资源