0

使用 JQuery，我正在尝试创建一些文本框，它们只允许数值，没有重复的数字，没有空格，并且只允许范围内的数字。我使用了从 1 到 999 的范围。到目前为止，这是我的代码。我有数字值和数字部分的重复工作，但我不确定如何防止空文本框或为每个文本框保持 1 到 999 的范围。范围部分似乎不起作用，我还没有弄清楚如何提示用户有关空文本框的信息。我认为有一种方法可以使用 HTML5 来控制范围，但如果用户不在范围内，该方法不会提示用户。你有什么建议吗？

<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<form id="form1">
    Enter some text: <input type="text" id="field1" />

    <br /><br />

    Enter some text: <input type="text" id="field2" />

    <br /><br />

    Enter some text: <input type="text" id="field3" />

</form>
<script type="text/javascript">
$(document).ready(function() {
    $('#field1').blur(function() {
        if ($(this).val() == $('#field2').val() || $(this).val() == $('#field3').val()) {
            $('#field1').stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">No duplicate values please!</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');
        }
    });
    $('#field2').blur(function() {
        if ($(this).val() == $('#field1').val() || $(this).val() == $('#field3').val()) {
            $('#field2').stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">No duplicate numbers please!</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');
        }
    });
    $('#field3').blur(function() {
        if ($(this).val() == $('#field1').val() || $(this).val() == $('#field2').val()) {
            $('#field3').stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">Duplicate values are not allowed!</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');
        }
    });
});

function RangeTextBox(min, max) {
    this.min = min;
    this.max = max;
    this.textboxbody = $("<input type='text'>");

// Check for a valid range
    this.textboxbody.keyup(function(event) {
        var textboxbody = event.target;
        var value = parseInt(textboxbody.value);
        var isNotNumeric = !/^[0-9]+$/.test(textboxbody.value);
        var isOutsideRange = (value < min) || (value > max);
        if (isNotNumeric || isOutsideRange) {
            $(textboxbody).addClass('error');
        }
        else {
            $(textboxbody).removeClass('error');
        }
    });

    return this.textboxbody;
}
<!-- To use it in, simple create a new TextBox by calling new RangeTextBox(min, max). For example -->

$(document).ready(function() {
    $("textboxbody").append(new RangeTextBox(1, 999));
});
</script>
</html>
4

1 回答 1

0 
$(document).ready(function() {
    $("textboxbody").append(RangeTextBox(1, 999));
});

我建议你使用 jquery 验证插件：http ://docs.jquery.com/Plugins/Validation

于 2013-01-18T06:12:52.773 回答