使用JQuery控制文本框的范围

Question

using JQuery, I am trying to create a few textboxes that will only allow numeric values, no duplicate numbers, no empty spaces and allow only numbers in the range. 使用JQuery，我试图创建一些仅允许数字值，不允许重复的数字，不允许有空格且仅允许范围内的数字的文本框。 I used the range from 1 to 999. This is my code so far. 我使用的范围是1到999。这是到目前为止的代码。 I have the numeric values and the duplication of numbers parts working but I am not sure how to prevent empty textboxes or maintain the range from 1 to 999 for each textbox. 我有数值和重复的数字部分，但是我不确定如何防止空白文本框或每个文本框的范围保持在1到999之间。 The range part does not seem to work and I haven't figured out how to prompt the user about empty textboxes yet. 范围部分似乎不起作用，我还没有弄清楚如何提示用户有关空文本框的信息。 I think there is a way to use HTML5 to control the range but that method won't prompt the user if they are not within the range. 我认为有一种使用HTML5来控制范围的方法，但是如果用户不在范围内，则该方法不会提示用户。 Do you have any suggestions? 你有什么建议吗？

<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>

Answer 1

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

I would suggest you to use jquery validation plugin: http://docs.jquery.com/Plugins/Validation 我建议您使用jquery验证插件： http : //docs.jquery.com/Plugins/Validation

使用JQuery控制文本框的范围

问题描述

1 个解决方案

解决方案1
0 2013-01-18 06:12:52

使用JQuery控制文本框的范围

问题描述

1 个解决方案

解决方案1 0 2013-01-18 06:12:52

解决方案1
0 2013-01-18 06:12:52