在React版SurveyJS表单中切换验证模式的实现需求

需求明确：第一页的「同意使用条款」复选框需即时验证（未勾选无法进入下一页），其余33页保持原有的提交时（onComplete）验证模式。以下是基于React的实现步骤：

核心思路 #

全局保持checkErrorsMode: "onComplete"以维持大部分页面的提交时验证逻辑，针对第一页的复选框单独添加页面切换拦截逻辑，强制验证通过后才能翻页。

代码实现 #

1. 更新surveyProps配置 #

在原有配置基础上添加页面切换拦截和值变化监听事件：

const surveyProps = {
    model: model,
    onComplete: onComplete,
    onUploadFiles: onUploadFiles,
    onClearFiles: onClearFiles,
    showProgressBar: "top",
    checkErrorsMode: "onComplete", // 全局保持提交时验证
    showTOC: !isXlDown,
    completedHtml: t("questionnaire.completed_questionnaire_confirm.text"),
    completeText: t("button.send"),
    // 拦截页面切换，验证第一页的同意条款
    onCurrentPageChanging: (survey, options) => {
        // 仅拦截从第一页（index=0）离开的操作
        if (options.oldPage.index === 0) {
            const agreeCheckbox = survey.getQuestionByName("agree_terms");
            if (agreeCheckbox && !agreeCheckbox.value) {
                options.allow = false; // 阻止页面切换
                agreeCheckbox.setError("请勾选同意使用条款"); // 显示错误提示
            }
        }
    },
    // 用户勾选/取消勾选时清除错误提示
    onValueChanged: (survey, options) => {
        if (options.question.name === "agree_terms") {
            options.question.clearError();
        }
    }
};

2. 配置第一页的复选框 #

确保你的SurveyJS模型中，第一页的复选框设置为必填项（示例JSON配置）：

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "checkbox",
          "name": "agree_terms",
          "title": "我同意使用条款",
          "isRequired": true,
          "choices": [
            {
              "value": "true",
              "text": "同意"
            }
          ]
        }
      ]
    },
    // 其余33页的配置内容...
  ]
}

逻辑说明 #

• 全局checkErrorsMode保持onComplete，确保后续33页的验证仅在用户点击提交按钮时触发；
• onCurrentPageChanging事件专门拦截从第一页离开的操作，检查复选框状态，未勾选则阻止翻页并提示错误；
• onValueChanged事件在用户操作复选框时清除错误提示，优化交互体验。

内容的提问来源于stack exchange，提问作者Rafik Mansour