Google Forms字段失焦时用Google Script实现自定义验证及唯一值校验可行性

当然能实现！不过得先说明个小前提：Google Forms原生并没有直接给字段失焦（blur）事件开钩子，但咱们可以用Apps Script + 自定义HTML侧边栏的组合来搞定——侧边栏的前端代码能监听表单字段的失焦动作，再调用后端脚本去校验数据唯一性，最后给用户弹出错误提示。

1. 准备好你的Google Form字段 #

先打开目标Google Form，添加一个短文本字段（比如你要校验唯一性的「用户ID」字段），务必记住这个字段的标题，后面脚本要靠它定位目标输入框。

2. 启动Apps Script编辑器 #

点击表单右上角的「三个点」→「脚本编辑器」，进入Apps Script的代码编辑界面。

3. 编写后端唯一性校验脚本（Code.gs） #

这个脚本负责从已提交的表单响应里提取数据，判断当前输入的值是否重复。直接把下面的代码替换掉默认的myFunction就行：

// 获取所有已提交的目标字段值
function getSubmittedResponses() {
  const form = FormApp.getActiveForm();
  const responses = form.getResponses();
  const submittedValues = [];
  
  // 替换成你要校验的字段标题
  const targetFieldTitle = "用户ID";
  const formItems = form.getItems();
  
  // 找到目标字段在表单中的索引
  let targetItemIndex = -1;
  for (let i = 0; i < formItems.length; i++) {
    if (formItems[i].getTitle() === targetFieldTitle) {
      targetItemIndex = i;
      break;
    }
  }
  
  // 提取所有已提交的该字段值
  if (targetItemIndex !== -1) {
    responses.forEach(response => {
      const answer = response.getItemResponses()[targetItemIndex].getResponse();
      if (answer) submittedValues.push(answer.trim());
    });
  }
  
  return submittedValues;
}

// 校验输入值是否唯一
function checkValueUniqueness(inputValue) {
  const submittedValues = getSubmittedResponses();
  return !submittedValues.includes(inputValue.trim());
}

4. 创建自定义HTML侧边栏（用于前端交互） #

点击编辑器左侧的「+」→「HTML」，命名为Sidebar，把下面的代码粘贴进去——这里的代码会监听字段失焦事件，调用后端校验并显示提示：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .error-message {
        color: #dc3545;
        font-size: 14px;
        margin-top: 8px;
        display: none;
      }
    </style>
  </head>
  <body>
    <p>请在表单中输入内容，离开字段时会自动校验唯一性</p>
    <div id="errorMsg" class="error-message">该值已存在，请输入其他内容！</div>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // 定位目标字段的输入框，这里的选择器要和你的字段标题匹配，记得替换成你的字段名
        const targetInput = document.querySelector('div[role="listitem"]:has(div[aria-label="用户ID"]) input');
        
        if (targetInput) {
          // 监听字段失焦事件
          targetInput.addEventListener('blur', async function() {
            const inputValue = this.value.trim();
            const errorMsg = document.getElementById('errorMsg');
            
            // 空值不校验
            if (!inputValue) {
              errorMsg.style.display = 'none';
              targetInput.style.border = '';
              return;
            }
            
            // 调用后端的校验函数
            const isUnique = await google.script.run.withSuccessHandler(result => {
              return result;
            }).checkValueUniqueness(inputValue);
            
            // 根据校验结果更新提示和样式
            if (!isUnique) {
              errorMsg.style.display = 'block';
              targetInput.style.border = '1px solid #dc3545';
            } else {
              errorMsg.style.display = 'none';
              targetInput.style.border = '';
            }
          });
        }
      });
    </script>
  </body>
</html>

5. 添加打开侧边栏的触发函数 #

回到Code.gs，追加下面的代码，这样你就能在表单里打开这个校验工具：

// 打开自定义校验侧边栏
function showValidationSidebar() {
  const htmlPanel = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('唯一性校验工具');
  FormApp.getUi().showSidebar(htmlPanel);
}

6. 部署并启用功能 #

• 点击脚本编辑器的「部署」→「测试部署」，选择「Web应用」类型，权限设置为「仅限我自己」，然后点击「部署」。
• 回到Google Form刷新页面，顶部菜单会出现「扩展程序」选项，里面就能找到「显示唯一性校验工具」，点击它打开侧边栏。
• 现在试试：在目标字段输入内容，点击其他地方（失焦），如果值已经被提交过，就会弹出红色错误提示，输入框也会变红；如果是唯一值，提示就会隐藏~

几个关键注意事项 #

• 字段选择器调整：HTML里的querySelector选择器可能需要根据你的表单实际结构微调，如果字段标题不是「用户ID」，一定要替换成你的字段名。
• 多人协作场景：这个校验是基于已提交的响应数据，如果你需要实时校验其他正在填写的用户输入（多人同时填表单的情况），得结合Google Sheets做实时数据同步——因为Form的响应数据要等提交完成才会更新到脚本里。
• 权限授权：第一次运行脚本时会要求授权，按照提示完成即可，不用担心权限问题，毕竟只有你能访问这个脚本。

内容的提问来源于stack exchange，提问作者Sam Lewis