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

Question

我正在寻找表单验证解决方案。我有三个数字字段。其中第一个具有值:min=50，max=100。第二和第三个在一起将有 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 ''; }) );
    });
});

和工作 fiddle :https://jsfiddle.net/04d5gkxd/2/

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

Answer 1

正如@Alnitak 在评论中建议的那样，您更适合通过某些 slider 控件设置值。您可以使用 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);
    }
});

Working example