Question

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

Answer 1

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

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

使用JQuery控制文本框的范围

1 个答案: