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

Question

我正在寻找表单验证解决方案。我有三个数字字段。其中第一个具有值：最小=50，最大=100。第 2 和第 3 个 TOGETHER将具有 max=50，但不能以相同的方式拆分，因此 max=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 ''; }) );
    });
});

和工作小提琴：https：//jsfiddle.net/04d5gkxd/2/

换句话说，字段组：2nd 和 3rd 必须检查第一个输入的当前值，并在此基础上为用户提供从 2nd 和 3rd 中选择适当值的可能性。 有什么想法吗？

Answer 1

正如@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" />

$('#sliderA').slider({
    min: 50,
    max: 100,
    change: function(e, ui) {
        $('#value_1').val(ui.value);
    }
});
$('#sliderB').slider({
    min: 0,
    max: 50,
    change: function(e, ui) {
        $('#value_2').val(ui.value);
        $('#value_3').val(50 - ui.value);
    }
});

工作示例