表单非空校验需求：除搜索框txtPesquisa外其余输入需非空

针对你提出的表单校验需求，我整理了一套实用的实现思路和代码，帮你快速完成校验逻辑：

核心校验逻辑 #

• 跳过id为txtPesquisa的搜索文本框（仅在不执行搜索时允许为空，若有搜索触发逻辑可额外单独判断）
• 对所有其他**文本框（input[type="text"]）和下拉框（select）**执行强制非空校验
• 文本框自动过滤纯空格输入（避免用户输入空格蒙混过关）
• 下拉框确保用户选择了有效选项（而非默认的"请选择"占位项）

原生JavaScript实现代码 #

function validateForm() {
    // 定位所有需要校验的目标控件：排除搜索框的文本框 + 所有下拉框
    const requiredTextInputs = document.querySelectorAll('input[type="text"]:not(#txtPesquisa)');
    const requiredSelects = document.querySelectorAll('select');
    
    let isFormValid = true;
    let errorTips = "请完成以下必填项：\n";

    // 逐个校验文本框
    requiredTextInputs.forEach(input => {
        if (input.value.trim() === "") {
            isFormValid = false;
            errorTips += `- ${input.placeholder || input.name || "未命名文本框"}\n`;
        }
    });

    // 逐个校验下拉框（这里默认第一个选项是占位项，可根据你的实际配置调整判断逻辑）
    requiredSelects.forEach(select => {
        // 两种判断方式选其一即可：
        // 方式1：判断选中项的value是否为空（适合占位项value设为""的情况）
        if (select.value.trim() === "") {
        // 方式2：判断是否选中了第一个选项（适合占位项是纯提示文本的情况）
        // if (select.selectedIndex === 0) {
            isFormValid = false;
            errorTips += `- ${select.options[0].text || select.name || "未命名下拉框"}\n`;
        }
    });

    // 校验不通过时提示错误并阻止表单提交
    if (!isFormValid) {
        alert(errorTips);
        return false;
    }

    // 校验通过，允许表单提交
    return true;
}

使用说明 #

1. 在你的表单标签上绑定提交校验事件：

   <form onsubmit="return validateForm()">
       <!-- 你的表单控件内容 -->
   </form>
   

2. 如果你的必填控件有统一的类名（比如must-fill），可以修改选择器让逻辑更灵活，比如：

   const allRequiredControls = document.querySelectorAll('.must-fill');
   

3. 若txtPesquisa仅在点击搜索按钮时需要校验，可在搜索按钮的点击事件里单独判断该控件，不影响全局表单的提交校验。

体验优化建议 #

• 可以把弹窗提示改成在对应控件下方显示红色文字提示，比弹窗更友好
• 若项目用了jQuery，也可以用更简洁的选择器写法，核心逻辑和上面一致

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