如何阻止表单提交并在售价低于成本价时显示错误DIV？

没问题，这就帮你实现这个价格验证的功能！核心思路是监听表单提交事件，在提交前校验售价和成本价的关系，不满足条件就显示警告并阻止表单提交，同时配合输入监听提升用户体验。

实现步骤&代码示例 #

首先，先确认你的HTML结构（建议给关键元素加上id，方便操作并适配你已有的hide函数）：

<form id="product-sale-form">
  <label>成本价：<input type="number" id="cost-price" required></label>
  <label>售价：<input type="number" id="sale-price" required></label>
  <!-- 给警告div加上id，适配你已有的hide函数 -->
  <div id="price-warning" class="warnings" style="display: none;">error in price</div>
  <button type="submit">确认售卖</button>
</form>

然后编写JavaScript逻辑，结合你已有的hide函数：

// 先获取页面上的关键元素
const saleForm = document.getElementById('product-sale-form');
const costPrice = document.getElementById('cost-price');
const salePrice = document.getElementById('sale-price');
const priceWarning = document.getElementById('price-warning');

// 监听表单提交事件
saleForm.addEventListener('submit', function(event) {
  // 把输入值转为数字，避免字符串比较的坑
  const costValue = parseFloat(costPrice.value);
  const saleValue = parseFloat(salePrice.value);

  // 先校验是否是有效数字
  if (isNaN(costValue) || isNaN(saleValue)) {
    priceWarning.textContent = '请输入有效的数字价格';
    priceWarning.style.display = 'block';
    event.preventDefault(); // 阻止表单提交
    return;
  }

  // 核心校验：售价低于成本价时触发警告
  if (saleValue < costValue) {
    priceWarning.textContent = 'error in price'; // 恢复原警告文本
    priceWarning.style.display = 'block';
    event.preventDefault(); // 阻止表单默认提交行为，禁止售卖
  } else {
    // 价格合法，隐藏警告
    hide('price-warning'); // 调用你已有的hide函数
  }
});

// 可选优化：当用户修改价格时自动隐藏警告，提升体验
costPrice.addEventListener('input', () => hide('price-warning'));
salePrice.addEventListener('input', () => hide('price-warning'));

关键逻辑说明 #

• 阻止表单提交：通过调用event.preventDefault()取消表单的默认提交行为，确保不符合条件时无法完成售卖操作。
• 数字类型转换：用parseFloat把输入的字符串转为数字，避免出现"100"字符串比"99"字符串小的错误判断。
• 输入监听优化：当用户修改成本价或售价时自动隐藏警告，不用手动关闭，更符合用户操作习惯。
• 复用已有函数：直接调用你提供的hide函数来隐藏警告div，保持代码一致性。

如果你的元素id和示例不同，只需要把代码里的id替换成你实际的id即可~

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