Question

我使用以下jQuery代码验证我的表单字段。但是这段代码仅适用于2个字段，而且我的网站还有更多字段。有没有办法简化这个以获得更多领域？

// Input validation
var wz_form1 = $('#wz_form1');
var wz_width = $('#wz_width');
var wz_height = $('#wz_height');

wz_width.blur(vld_wz_width);
wz_height.blur(vld_wz_height);

wz_form1.submit(function() {
    if(vld_wz_width() & vld_wz_height() ) {
        return true;
    }else{
        return false;   
    }
});

function vld_wz_width() {
    if(wz_width.val().length < 1) {
        wz_width.addClass('red_border');
        return false;
    } else{
        wz_width.removeClass('red_border');
        return true;

    }
}

function vld_wz_height() {
    if(wz_height.val().length < 1) {
        wz_height.addClass('red_border');
        return false;
    } else{
        wz_height.removeClass('red_border');
        return true;

    }
}

我的上一次更新：

var wz_form = $('#wz_form1');
$(wz_form).submit(function() {

    function wz_validation() {
        var txtboxes=$('input[validate="true"]');
        for(var i=0;i<txtboxes.length;i++) {

            if($(txtboxes[i]).val()=="") {
                $(txtboxes[i]).addClass('red_border');
                return false;
            }
            else{
                $(txtboxes[i]).removeClass('red_border');
                return true;
            }
        }
    }

    if(wz_validation()) {
        return true;    
    }
    else{
        return false;   
    }

});

Answer 1

如果您使用的是type = text，则可以使用以下代码

$(btnSubmit).click(function()
{
var txtboxes=$('input[type="text"]');
for(var i=0;i<txtboxes.length;i++)
{
if($(txtboxes[i]).val()=="")
$(txtboxes[i]).addClass('red_border');
else
$(txtboxes[i]).removeClass('red_border');
}
});

Answer 2

如果您需要非空白验证，可以使用：

// Input validation
var wz_form1 = $('#wz_form1');
var wz_width = $('#wz_width');
var wz_height = $('#wz_height');
var wz_field1 = $('#wz_field1'); //Add new fields
var wz_field2 = $('#wz_field2');
//..... add all the required fields


wz_width.blur(vld_wz_width);
wz_height.blur(vld_wz_height);

wz_form1.submit(function() {
    if(vld_wz_width() & vld_wz_height() & vld_wz_field1 & vld_wz_field2 /* & so on ...*/ ) {
        return true;
    }else{
        return false;   
    }
});

function vld_wz_width() {
    if(wz_width.val().length < 1) {
        wz_width.addClass('red_border');
        return false;
    } else{
        wz_width.removeClass('red_border');
        return true;

    }
}

function vld_wz_height() {
    if(wz_height.val().length < 1) {
        wz_height.addClass('red_border');
        return false;
     } else{
        wz_height.removeClass('red_border');
        return true;

    }
}

 function vld_wz_fields() {
    if(wz_field1.val().length < 1) {
        wz_field1.addClass('red_border');
        return false;
     } else{
        wz_field1.removeClass('red_border');
        return true;

    }
}

 function vld_wz_fields() {
    if(wz_field2.val().length < 1) {
        wz_field2.addClass('red_border');
        return false;
     } else{
        wz_field2.removeClass('red_border');
        return true;

    }
}

//and so on ...

如果您熟悉html5，则只能在表单字段中添加required属性，这将进行自动表单验证

Answer 3

如果您的字段包含包含_width等常用字符串的ID，则可以使用以下ON()附加验证：

$("input[id~='_width']").on("blur", vld_wz_width);
$("input[id~='_height'").on("blur", vld_wz_height);

jQuery表单验证更多字段

3 个答案: