Question

我想提醒用户注意4个字段中所做的任何更改。目前，该脚本一次只能运行1个。如果进行了1或4次更改，则仅向第一个进行警报并跳过其他更改。我想将它们全部显示在一个确认框中。

<script>
function validateForm()
{
var w = document.getElementById("item_name");
if (w.value != w.defaultValue)
{
  return confirm('Update Item Name. Continue?');
}

var x = document.getElementById("item_brand");          
if (x.value != x.defaultValue)
{
return confirm('Update Item Brand. Continue?');
}

var y = document.getElementById("department_id");           
if (!y.options[y.selectedIndex].defaultSelected)
{
return confirm('Update Item Department. Continue?');
}

var z = document.getElementById("vendor_part_num");         
if (z.value != z.defaultValue)
{
return confirm('Update Vendor Part Number. Continue?');
}

}
</script>

Answer 1

您不想单独询问每个字段，因此您可以先检查所有字段，然后向用户询问，例如

<script>
function validateForm()
{
var strQuestion = '';
var bStChanged = false;
var w = document.getElementById("item_name");
if (w.value != w.defaultValue)
{
  bStChanged = true;
  strQuestion = strQuestion + 'Update Item Name.' + String.fromCharCode(13);
}

var x = document.getElementById("item_brand");          
if (x.value != x.defaultValue)
{
  bStChanged = true;
  strQuestion = strQuestion + 'Update Item Brand.' + String.fromCharCode(13);
}

var y = document.getElementById("department_id");           
if (!y.options[y.selectedIndex].defaultSelected)
{
  bStChanged = true;
  strQuestion = strQuestion + 'Update Item Deparment.' + String.fromCharCode(13);
}

var z = document.getElementById("vendor_part_num");         
if (z.value != z.defaultValue)
{
  bStChanged = true;
  strQuestion = strQuestion + 'Update Vendor Part Number.' + String.fromCharCode(13);
}

if (bStChanged)
{
  return confirm(strQuestion + ' Continue?')
}

}
</script>

Answer 2

您可以将validation行为与您想要管理的行为分开，例如确认或其他任何行为：

var fields = {
    "item_name": "Item Name",
    "item_brand": "Item Brand",
    "department_id": "Item Department",
    "vendor_part_num": "Vendor Part Number"
};
var confirmFields = [];

function isFieldChanged(elmId){
    var elm = document.getElementById(elmId);
    if(!elm){
        return;
    }
    var isChanged = false;
    if(elm.tagName.toLowerCase() == "select"){
        isChanged = !elm.options[elm.selectedIndex].defaultSelected;
    }
    else{
        isChanged = (elm.value !== elm.defaultValue);
    }
    if(isChanged){
        confirmFields.push(elm.id);
    }

    //in case you want to use the isChanged in another use case
    return isChanged;
}

function validateForm(){
    confirmFields = [];
    Object.keys(fields).forEach(isFieldChanged);
    if(confirmFields.length){
        var changes = confirmFields.map(function(fieldName){
            return fields[fieldName];
        }).join(", ");
        return confirm('Update ' + changes + '. Continue?');
    }
    return true;
}

通过这种方式，您实际上可以分割表单和字段验证，并且您只需要用户确认一次。

另一个棘手的问题是，您可以在forEach函数中使用validateForm，而不是在字段中手动迭代：

    for(var key in fields){
        if(fields.hasOwnProperty(key)){
            isFieldChanged(key);
        }
    }

Answer 3

您可以将上一次检查的结果连接到下一次检查：

<script>
function validateForm()
{
    var continueAsking = true;
    var w = document.getElementById("item_name");

    if (w.value != w.defaultValue)
    {
      continueAsking = confirm('Update Item Name. Continue?');
    }

    var x = document.getElementById("item_brand");          
    if (continueAsking && x.value != x.defaultValue)
    {
      continueAsking = confirm('Update Item Brand. Continue?');
    }

    var y = document.getElementById("department_id");           
    if (continueAsking && !y.options[y.selectedIndex].defaultSelected)
    {
      continueAsking = confirm('Update Item Department. Continue?');
    }

    var z = document.getElementById("vendor_part_num");         
    if (continueAsking && z.value != z.defaultValue)
    {
      continueAsking = confirm('Update Vendor Part Number. Continue?');
    }

    return continueAsking;
}
</script>

Answer 4

你可以使用jquery：

来使用这样的东西

var defaults = { item_name:'', 
            item_brand:'', 
            department_id:'', 
            vendor_part_num:'' };

$('#confirm').on('click', function() {
  $('.check').each(function() {
    var item = $(this).attr('id');
    var item_value = $(this).val();
    if( defaults[ item ] != item_value ) {
      alert(item + ' have changed');
    }
  });
});

Here's a working example

Javascript确认多项更改

4 个答案: