Javascript Jquery-keyup事件检查三个字段中的输入值

我正在寻找表单验证解决方案。我有三个数字字段。其中第一个有值：最小值=50，最大值=100。第二个和第三个组合的最大值为50，但不能以相同的方式拆分，因此最大值为25。我曾想过使用IF语句，但这种解决方案太复杂了。工作原理：

• 第一个输入值=50，第二个值=25，第三个值=25
• 第一个输入值=60，第二个值=0，第三个值=50
• 第一个输入值=75，第二个值=20，第三个值=5
• 等

我有一些代码来验证正确的数据输入：

$(document).ready(function () {    

    $('input').keyup(function() {
        var $th1 = $('input[name="value_1"]');
        var $th2 = $('input[name="value_2"]');
        var $th3 = $('input[name="value_3"]');

        $th1.val( $th1.val().replace(/[^a-zA-Z0-9]/g, function(){ return ''; }) );
        $th2.val( $th2.val().replace(/[^a-zA-Z0-9]/g, function(){ return ''; }) );
        $th3.val( $th3.val().replace(/[^a-zA-Z0-9]/g, function(){ return ''; }) );
    });
});

和工作小提琴：

---

换句话说，第二和第三组字段必须检查第一次输入的当前值，并在此基础上使用户可以从第二和第三组字段中选择适当的值。有什么想法吗？

正如@Alnitak在评论中建议的那样，您最好使用一些滑块控件来设置值。您可以有一个范围为

50-100

，另一个范围为

0-50

，控制两个最终值。大概是这样的：

<div id="sliderA" class="slider"></div>
<div id="sliderB" class="slider"></div>

<input type="hidden" name="value_1" id="value_1" value="50" />
<input type="hidden" name="value_2" id="value_2" value="0" />
<input type="hidden" name="value_3" id="value_3" value="0" />

---

您是否考虑过改用jQuery UI“滑块”呢？p.s.让每一次输入更改都改变所有三个输入的内容确实不是一个好主意。p.p.s。并考虑使用<代码> $el.Vall（函数（…））< /Cord>来执行读修改写，而不是$EL .Var（$el.Vall（…）），您知道的注释有一个编辑功能。Alnitak@Alnitak天哪，没必要为此发火，只是连续3条这样的评论可能会阻止其他用户阅读其余的内容。我无意冒犯你，谢谢。我将看看它，并将重新定义我目前拥有的。你的解决方案确实比我的好，还有一件事。当谈到sliderB时，为什么我不能将max更改为变量？你知道，例如在sliderA中，值是70，在sliderB中，最大值应该是30（正如我提到的，我们总共应该有100）。我甚至尝试过这样做，但有点不对劲：我已经设法创建了更接近最终结果的内容，但当前的问题是，将数据拆分为两个字段是相等的：