如何修复Google Apps Script表单Contact输入框重复数据高亮的报错问题

报错原因拆解 #

触发Uncaught TypeError: Cannot read properties of undefined (reading 'length')的核心问题：

• 前端输入框的onblur直接调用blurFunction()，但该函数需要接收后端返回的表格数据参数，此时values为undefined，无法读取length属性
• code.gs中缺失readData函数，getContactList无法从表格获取实际数据
• 原blurFunction循环逻辑存在bug：每次遍历都会重置输入框样式，最后只会显示最后一条数据的判断结果，无法正确识别重复

修复步骤及完整代码 #

1. 修正前端触发逻辑（Form.html） #

把输入框的onblur事件从直接调用blurFunction()改成调用checkdata()，由checkdata负责请求后端数据并传递给blurFunction：

<div class="form-group col-md-6">
  <label for="contact">Contact</label>
  <input type="tel" class="form-control" id="contact" name="contact" placeholder="contact" onblur="checkdata()">
</div>

2. 补充缺失的readData函数（code.gs） #

在code.gs中添加读取表格数据的核心函数：

function globalVariables(){ 
  var varArray = {
    spreadsheetId   : '1MQQK6P-4DccBogN7at5x66m7dyaDSx4FdeiSz9XhxoY', // 根据实际表格修改
    dataRage        : 'Data!A2:K',                                    // 根据实际表格修改
    dataRage2       : 'Data2!A2:K',                                   // 根据实际表格修改
    idRange         : 'Data!A2:A',                                    // 根据实际表格修改
    idRange2         : 'Data2!A2:A',                                   // 根据实际表格修改
    lastCol         : 'K',                                            // 根据实际表格修改
    insertRange     : 'Data!A1:K1',                                   // 根据实际表格修改
    insertRange2    : 'Data2!A1:K1',                                  // 根据实际表格修改
    sheetID         : '0'                                             // 根据实际表格修改
  };
  return varArray;
}

// 新增：读取表格数据的函数
function readData(spreadsheetId, range) {
  var sheet = SpreadsheetApp.openById(spreadsheetId);
  return sheet.getRange(range).getValues();
}

function getContactList(range){
  var list = readData(globalVariables().spreadsheetId, range);
  return list;
}

3. 优化blurFunction逻辑（Javascript.html） #

先默认设置输入框为正常样式，遍历数据时一旦找到重复就修改样式并跳出循环，避免重复覆盖：

function checkdata() {
  google.script.run.withSuccessHandler(blurFunction).getContactList("Data!D1:D195");
}

function blurFunction(values) { 
  const contactInput = document.getElementById('contact');
  const inputValue = contactInput.value.trim();
  // 默认设置为无重复样式
  contactInput.style.background = "yellow";
  
  // 遍历表格数据查找重复
  for (var i = 0; i < values.length; i++) { 
    const cellValue = values[i][0]?.toString().trim();
    if (cellValue && inputValue === cellValue) { 
      contactInput.style.background = "blue";
      break; // 找到重复后直接跳出循环，无需继续遍历
    }
  }
}

验证效果 #

修改完成后重新部署Web应用：

• 输入框失焦时，自动请求表格中的Contact列数据
• 输入内容与表格已有数据重复时，输入框背景变为蓝色；否则保持黄色

内容的提问来源于stack exchange，提问作者ia and