Google Apps Script Web应用如何实现复选框至少选一个校验

很多表单场景要求同组复选框至少选中1个才可提交，但针对GAS开发的Web应用，通用前端校验方案经常无法正常生效。单选按钮可以直接给同组input加required属性实现必选，但复选框没有原生的同组至少选1项的校验逻辑。

通用方案失效的核心原因 #

• 原生HTML的required属性对复选框的逻辑不符合需求：同名单选按钮加required，只要选1个就能通过校验，但同组复选框加required会要求所有带该属性的复选框全部勾选才能提交，和需求完全相反
• GAS的表单提交依赖google.script.run异步传值，很多通用方案没有阻止表单默认提交行为，会导致校验逻辑还没执行完，表单数据就已经传到服务端，校验完全失效

可直接复用的实现代码 #

1. 调整表单HTML结构 #

同组复选框设置相同的name属性，不要给单个复选框加required属性，预留错误提示节点，修改onsubmit的传参为事件对象：

<form id="requestNewKeys" onsubmit="handleFormSubmit(event)">
    <p>
        <label>What is your primary purpose for requesting Tool XXXXXX（可多选，至少选1项）</label>
    </p>
    <!-- 同组复选框统一name属性值 -->
    <div id="primaryPurposeGroup">
        <input type="checkbox" id="purpose0" name="primaryPurpose" value="Research">
        <label for="purpose0">Research</label><br>
        <input type="checkbox" id="purpose1" name="primaryPurpose" value="Teaching">
        <label for="purpose1">Teaching</label><br>
        <input type="checkbox" id="purpose2" name="primaryPurpose" value="Project">
        <label for="purpose2">Commercial Project</label><br>
    </div>
    <!-- 校验失败的错误提示，默认隐藏 -->
    <p style="color: red; display: none;" class="check-error">请至少选择1个使用场景后再提交</p>
    <input type="submit" value="Request License">
</form>

2. 改造提交处理函数，增加前置校验 #

在调用google.script.run之前先做复选框选中状态校验，校验通过再提交数据到服务端：

function handleFormSubmit(e) {
    // 阻止表单默认提交行为，避免提前触发提交
    e.preventDefault();
    const form = e.target;
    // 获取同组所有复选框
    const checkList = form.querySelectorAll('input[name="primaryPurpose"]');
    // 统计已选中的数量
    const checkedNum = Array.from(checkList).filter(item => item.checked).length;
    const errorTip = form.querySelector('.check-error');

    if (checkedNum < 1) {
        // 未选中任何项时显示提示，终止提交
        errorTip.style.display = 'block';
        return;
    }

    // 校验通过，隐藏提示，正常提交数据到GAS服务端
    errorTip.style.display = 'none';
    google.script.run
        .withSuccessHandler(updateResults)
        .processForm(form);
}

补充说明 #

• 该方案完全兼容GAS表单传值规则：同name的复选框选中多项时，服务端processForm函数接收到的primaryPurpose字段会自动转为数组类型，不需要额外修改服务端处理逻辑
• 如果需要调整选中数量限制（比如至少选2项、最多选3项），直接修改checkedNum的判断条件即可，逻辑通用
• 错误提示的样式可以根据自己的页面风格自定义，不需要拘泥于示例里的内联样式

内容的提问来源于stack exchange，提问作者Ian Crew