wearefine/fae项目教程：实现条件验证的最佳实践

前言

在Web应用开发中，表单验证是确保数据完整性的重要环节。wearefine/fae项目提供了一套优雅的条件验证解决方案，允许开发者根据其他字段的值动态控制某些字段的必填状态。本文将详细介绍如何在项目中实现这种条件验证功能。

条件验证概述

条件验证是指某个字段的验证规则依赖于其他字段的值。例如：

• 当用户勾选"详情页"复选框时，才要求填写"slug"字段
• 当选择特定支付方式时，才需要填写相关支付信息

这种动态验证能够显著提升用户体验，避免不必要的表单填写。

实现步骤

1. 创建自定义验证器

首先需要在app/validator/目录下创建自定义验证器文件，例如detail_page_validator.rb：

class DetailPageValidator < ActiveModel::EachValidator
  uses_messages :no_detail_page

  def validate_each(record, attribute, value)
    if record.detail_page && value.blank?
      record.errors.add(attribute, :no_detail_page)
    end
  end
end

这个验证器会检查：

1. 如果detail_page为true（复选框被选中）
2. 且当前验证字段（如slug）为空
3. 则添加验证错误

2. 模型配置

在模型中应用自定义验证器：

class Project < ActiveRecord::Base
  validates :name, presence: true
  validates :slug, detail_page: true
end

3. 表单视图调整

在表单视图中，需要为条件字段添加适当的标记：

= simple_form_for([:admin, @item]) do |f|
  ...
  .content
    = fae_input f, :name
    = fae_input f, :detail_page, helper_text: "此项目有详情页，应显示在工作类别页面"
    .js-optional-fields class=("#{ 'hidden' unless (params[:action] == 'edit' && @item.detail_page?) }")
      = fae_input f, :slug, label_html: { class: 'is_required_and_hidden'}

关键点：

• js-optional-fields类标记条件字段容器
• hidden类控制初始显示状态
• is_required_and_hidden类标记条件必填字段

4. 前端验证配置

创建validator.js文件配置前端验证：

var Validator = {
    init: function() {
      this.eachValidators.detail_page = function(options, messages) {
        var errorMessages = [];
        // 'this'指向表单元素
        is_checked = $('#project_detail_page').prop("checked") === true;
        if ( is_checked && (this.value === undefined || this.value === "")) {
          errorMessages.push(messages.no_detail_page);
        }
        return new this.Validation(errorMessages);
      };
    }
};

5. 样式配置

在fae.scss中添加样式：

.hidden {
  display: none;
}

label.is_required_and_hidden {
  &:before {
    content: '* ';
    color: var(--highlight-color);
  }
}

6. JavaScript交互逻辑

在fae.js中实现字段显示/隐藏逻辑：

var AcmeAdmin = {
  init: function() {
    Validator.init();
    var _this = this;
    if ( $('body.projects').length && $('body.projects.index').length === 0 ) {
      _this.check_for_detail_page("#project_detail_page");
      _this.project_edit_listener();
    }
  },

  project_edit_listener: function() {
    var _this = this;
    $("#project_detail_page").click(function(){
      _this.check_for_detail_page($(this));
    });
  },

  check_for_detail_page: function(field) {
    if ($(field).is(':checked')) {
      $('.js-optional-fields').removeClass('hidden');
    } else {
      $('.js-optional-fields').not('hidden').addClass('hidden');
      $('.js-optional-fields').find('input').val('');
    }
  }
};

实现原理

1. 后端验证：自定义验证器在模型保存时执行条件验证
2. 前端验证：前端库在前端实现相同的验证逻辑
3. UI交互：JavaScript控制条件字段的显示/隐藏
4. 视觉提示：CSS提供必填字段的视觉标识

最佳实践

1. 命名一致性：保持验证器、CSS类和JavaScript选择器命名一致
2. 初始状态处理：编辑页面时，应根据已有数据正确初始化字段状态
3. 清理数据：当条件不再满足时，清空相关字段值
4. 错误信息：提供清晰的验证错误提示

常见问题

1. 验证不生效：

   • 检查验证器是否正确定义并加载
   • 确认模型中的验证声明正确
   • 查看前端验证器是否初始化

2. 字段显示异常：

   • 检查CSS类是否正确应用
   • 确认JavaScript事件绑定正确

3. 前后端验证不一致：

   • 确保前后端验证逻辑完全相同
   • 测试各种边界情况

总结

wearefine/fae项目的条件验证功能提供了一套完整的解决方案，从前端交互到后端验证，确保了数据的一致性和良好的用户体验。通过本文的指导，开发者可以轻松实现各种复杂的条件验证场景。