2

フォームのキーアップ検証用のクラス「keyup-an」の簡単なキーアップ関数があります。このクラスには約10のフィールドがあります。ただし、投稿後、フォームにフィールドを追加します。しかし、キーアップではないため、緑と赤の背景は消えます。ページの読み込み時にこの結果に基づいて背景に色を付ける、このようなことをどのように行うのですか？

jQuery(document).ready(function() {

$('.keyup-an').each(function(index) {

    var inputVal = $(this).val();
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;
    if(!numericReg.test(inputVal)) {
        $(this).css('background', '#FAC3C3');
        $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>');
    } 
    else {
        $(this).css('background', 'lightgreen');
    }
});


$('.keyup-an').keyup(function() {
    $('span.error-keyup-1').hide();
    var inputVal = $(this).val();
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;
    if(!numericReg.test(inputVal)) {
        $(this).css('background', '#FAC3C3');
        $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>');
    } 
    else {
        $(this).css('background', 'lightgreen');
    }
});
4

3 に答える 3

2

これがあなたが望んでいたことだと思います。

$(document).ready(function() {
    // Each
    $('.keyup-an').each(function() {
        // Validate
        validate(this);
        // Key up
        $(this).keyup(function(){
            // Validate
            validate(this);
        });
    });
});


// Validate Function
function validate(element) {
    var obj = $(element);
    if(!/^[a-zA-Z0-9_ ]{2,30}$/.test(obj.val())) {
        // Invalid
        obj.css('background', '#FAC3C3');
        if(!obj.next().hasClass('error'))
        { obj.after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); }
    } else {
        // Valid
        obj.css('background', 'lightgreen');
        if(obj.next().hasClass('error'))
        { obj.next().remove(); }
    }
}

デモ： http： //jsfiddle.net/BerkerYuceer/q2ajM/

于 2012-10-24T07:46:27.503 に答える
1 
$('.keyup-an').each(function(index) {

    var inputVal = $(this).val();
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;

    if(!numericReg.test(inputVal)) {
        $(this).css('background', '#FAC3C3');
        $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>');
    } 
    else {
        $(this).css('background', 'lightgreen');
    }
});
于 2012-10-24T05:04:26.300 に答える
0

このようにキーアップイベントを定義する必要があります。ちなみに、要素フォームが動的に作成される場合は、イベントを.on（）でバインドする必要があります

jQuery(document).ready(function() {

$('.keyup-an').each(function(index) {
    $(this).keyup(function() {
        var inputVal = $(this).val();
        var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/;
        if(!numericReg.test(inputVal)) {
            $(this).css('background', '#FAC3C3');
            $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>');
        } 
        else {
            $(this).css('background', 'lightgreen');
        }
    });
});
}
于 2012-10-24T05:12:21.837 に答える