如何在警報框中顯示陣列中的所有項目？

Question

這是我的代碼片段：

onclick : function(){           // default button function 
                           form = new Object(); 
                           field = new Object();
                           form.vald = 0;
                           field.first = $('input[name$="sf_name"]');
                           field.last = $('input[name$="sf_last"]');
                           field.title = $('input[name$="sf_title"]');
                           field.company = $('input[name$="sf_company"]');
                           field.email = $('input[name$="sf_email"]');
                           field.phone = $('input[name$="sf_phone"]');
                           field.key = $('input[name$="sf_key"]');
                           fields = new Array();

                           if (!field.first.val()) {

                               fields.push("First Name");

                           }
                           if (!field.last.val()) {
                               fields.push("Last Name")

                           }
                           if (!field.title.val()) {
                               fields.push("Title")

                           }
                           if (!field.company.val()) {
                               fields.push("Company")

                           }
                           if (!field.email.val()) {
                               fields.push("Email")

                           }
                           if (!field.phone.val()) {
                               fields.push("Phone")

                           }
                           console.log(fields);
                           if (form.valid == 0) {
                               window.location = "<?php bloginfo('url'); ?>/download?viewkey="+field.key.val();
                           } else {
                               alert('Please correct the following fields before continuing: ');
                               //$('#form_487940 input').css("box-shadow", "inset #BBB 0px 0px 5px");
                           }

如您所見，任何無效字段都被壓入數組，因此我需要在“請先更正以下字段，然后繼續：”之后的警告框中顯示所有無效字段。

任何幫助將不勝感激，也許我可以通過不同的方式獲得相同的結果。

Answer 1

使用array.join像這樣：

alert('Please correct the following fields before continuing: \n' 
    + fields.join(", "));​​​​

會輸出一個逗號分隔的列表，例如

在繼續之前，請更正以下字段：

名，姓，公司

Answer 2

試試下面，

alert('Please correct the following fields before continuing: ' + fields.join());

Answer 3

alert('Please correct the following fields before continuing: ' + fields.join(", "));

Answer 4

您可以使用javascript數組的join方法，但請驗證您的代碼是否更好：

onclick: function() { // default button function 
    var
        form = {
           vald: true
        },
        field = {
            'first': $('input[name$="sf_name"]'),
            'last': $('input[name$="sf_last"]'),
            'title': $('input[name$="sf_title"]'),
            'company': $('input[name$="sf_company"]'),
            'email': $('input[name$="sf_email"]'),
            'phone': $('input[name$="sf_phone"]'),
            'key': $('input[name$="sf_key"]')
        },
        fields = [];

    var addValue = function(el, value) {
        if (!el.val()) {
            form.valid = false;
            fields.push(value);
        }
    };

    addValue(field.first, "First Name");
    addValue(field.last, "Last Name");
    addValue(field.title, "Title");
    addValue(field.company, "Company");
    addValue(field.email, "Email");
    addValue(field.phone, "Phone");

    if (form.valid) {
        //not recommended to do this, for example could be an input value
        window.location = "<?php bloginfo('url'); ?>/download?viewkey=" + field.key.val();
        //recommended  
        //window.location = $('#url').val() + '/download?viewkey=' + field.key.val();

        return;
    }

    var fieldsString = field.join(" \n ");
    alert("Please correct the following fields before continuing: \n" + fieldsString);

}

要么：

onclick: function() { // default button function 
    var
        field = {
            'First Name': $('input[name$="sf_name"]'),
            'Last Name': $('input[name$="sf_last"]'),
            'Title': $('input[name$="sf_title"]'),
            'Company': $('input[name$="sf_company"]'),
            'Email': $('input[name$="sf_email"]'),
            'Phone': $('input[name$="sf_phone"]'),
            'key': $('input[name$="sf_key"]')
        },
        fields = [];

    $.each(field, function(i, v) {
        if (i != 'key' && !v.val()) {
            fields.push(i);
        }
    };

    if (fields.length == 0) {
        window.location = $('#url').val() + '/download?viewkey=' + field.key.val();
        return;
    }

    var fieldsString = field.join(" \n ");
    alert("Please correct the following fields before continuing: \n" + fieldsString);
}

Answer 5

嘗試這個

var field = ['Name Invalid', 'Email Invalid' , 'Phone Invalid' 
              , 'Address Invalid'];​​​​​
var alertStr = '';
$.each(field , function(i) {
    alertStr += field[i] + '\n'
 })

 alert(alertStr)   

檢查FIDDLE

這將確保每個錯誤都在單獨的行中

如果是這樣，您也可以使用

fields.join('\n');