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 に答える