ASP.NET实现两个依赖表单字段均填写才可提交的最简方法

不需要改现有业务逻辑，加几行前端代码就能搞定，适配你当前的Bootstrap表单结构：

• 第一步先调整提交按钮：给按钮加固定id，默认加上disabled属性，保证页面刚加载、字段没填完的时候按钮是不可点击的状态，示例：

<button type="submit" class="btn btn-primary" id="filterSubmitBtn" disabled>提交查询</button>

• 第二步加一段原生JS校验逻辑，不需要引入任何第三方库，监听两个价格输入框的内容变化，实时判断是否满足提交条件：

const lowPriceInput = document.querySelector('input[name="recPriceLow"]');
const highPriceInput = document.querySelector('input[name="recPriceTop"]');
const submitBtn = document.getElementById('filterSubmitBtn');

function validatePriceRange() {
    const lowVal = lowPriceInput.value.trim();
    const highVal = highPriceInput.value.trim();
    // 校验规则：两个字段都非空、都是合法数字，可按需扩展
    const valid = lowVal !== '' 
        && highVal !== '' 
        && !isNaN(Number(lowVal)) 
        && !isNaN(Number(highVal))
        && Number(lowVal) <= Number(highVal);
    submitBtn.disabled = !valid;
}

// 绑定输入事件，用户输入、修改值的时候自动触发校验
lowPriceInput.addEventListener('input', validatePriceRange);
highPriceInput.addEventListener('input', validatePriceRange);

上面代码里Number(lowVal) <= Number(highVal)是附加的合理性校验，避免用户输入的起始价格高于结束价格，如果不需要可以直接删掉。

如果你的ASP.NET项目已经引入了jQuery（多数传统ASP.NET项目默认会带），校验代码可以简化成：

const $low = $('input[name="recPriceLow"]');
const $high = $('input[name="recPriceTop"]');
const $submit = $('#filterSubmitBtn');

function checkValid() {
    const low = $low.val().trim();
    const high = $high.val().trim();
    $submit.prop('disabled', !(low && high && !isNaN(low) && !isNaN(high) && Number(low) <= Number(high)));
}

$low.add($high).on('input', checkValid);

注意事项 #

前端的按钮禁用只是提升交互体验、避免用户误提交，后端接口必须同步做字段非空、数值合法性、价格区间逻辑校验，防止用户绕过前端限制提交非法参数。

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