Jquery

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 在评论中所建议的那样，您将更适合通过某些滑块控件设置值。您可以有一个范围为 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 事件检查三个字段中的输入值

Jquery - keyup event checking input value in three fields

javascript

events

keyup