Spring Boot项目HTML页面如何实现最大价格大于最小价格的输入校验

1 先修正现有HTML的ID错位问题 #

你提供的HTML代码存在标签关联错误：最小价格的input ID写为了max_price，最大价格的input ID写为了min_price，会导致元素选择和标签点击定位失效，先修正为正确结构：

<div class="mb-3">
    <label for="min_price" class="form-label">Min price</label>
    <input type="number" step="0.01" class="form-control" id="min_price" name="min_price">
</div>
<div class="mb-3">
    <label for="max_price" class="form-label">Max price</label>
    <input type="number" step="0.01" class="form-control" id="max_price" name="max_price">
</div>
<!-- 错误提示区域，如果没有引入Bootstrap，把d-none替换为style="display: none" -->
<div id="price_error" class="text-danger d-none"></div>

2 前端校验逻辑实现 #

用原生JavaScript即可实现，兼容Spring Boot项目常用的Thymeleaf、JSP等所有前端模板，无需额外依赖：

const minPriceInput = document.getElementById('min_price');
const maxPriceInput = document.getElementById('max_price');
const errorTip = document.getElementById('price_error');
// 替换为你实际页面中表单的ID
const submitForm = document.getElementById('your_form_id');

// 监听两个输入框的数值变化
[minPriceInput, maxPriceInput].forEach(input => {
    input.addEventListener('input', validatePrice);
});

// 校验规则
function validatePrice() {
    const minVal = parseFloat(minPriceInput.value) || 0;
    const maxVal = parseFloat(maxPriceInput.value) || 0;
    
    // 两个值都填写后才校验大小关系
    if (minPriceInput.value && maxPriceInput.value) {
        if (maxVal <= minVal) {
            errorTip.textContent = '最大价格必须大于最小价格';
            errorTip.classList.remove('d-none');
            return false;
        }
    }
    // 动态设置原生输入限制，避免用户输入超出合理范围
    maxPriceInput.min = minVal;
    minPriceInput.max = maxVal || 99999999; // 99999999可替换为你业务允许的价格上限
    errorTip.classList.add('d-none');
    return true;
}

// 表单提交前二次拦截校验
submitForm.addEventListener('submit', function(e) {
    if (!validatePrice()) {
        e.preventDefault();
    }
});

逻辑说明 #

• 实时监听输入框变化，只要两个值都不为空就自动校验大小
• 动态设置min/max原生属性，用户输入时会被系统自动限制范围
• 表单提交前会二次校验，不符合规则则阻止提交

3 后端补充校验（必加） #

前端校验可以被用户手动绕过，必须在Spring Boot后端添加校验逻辑，避免非法数据入库：
你可以直接在Controller接收参数后做判断：

@PostMapping("/submit")
public R submit(@RequestParam BigDecimal minPrice, @RequestParam BigDecimal maxPrice) {
    if (maxPrice.compareTo(minPrice) <= 0) {
        return R.fail("最大价格必须大于最小价格");
    }
    // 后续业务逻辑
}

如果使用DTO接收参数，也可以自定义校验注解实现统一校验。

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