Question

我正在寻找表单验证解决方案。我有三个数字字段。其中第一个有值：min = 50，max = 100。第2和第3个TOGETHER的最大值= 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/

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

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);
    }
});

Working example

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

1 个答案: