javascript - jQuery文本替换无法正常工作

Question

我有使用jquery提交的表单，everythinh正常工作。如果出现错误，浏览器将显示错误。但是问题是，如果重新提交表单，错误将不会更改。要么一无所有，要么不同。

<script>
$(document).ready(function(e) {
    $('#addNew').submit(function(e) {
        event.preventDefault();
        var err_count = 0;
        var name_err = '';
        var name_err_count = 0;
        if($('#f_name').val() === ''){
            err_count++;
            name_err_count++;
            name_err = "You need a first name";
        }else{
            name_err = '';
        }
        if($('#l_name').val() === ''){
            err_count++;
            name_err_count++;
            if(name_err_count > 0){
                name_err += " and a last name.";
            }else{
                name_err += "You need a last name";
            }
        }else{
            name_err = '';
        }
        $('#name_err').replaceWith(name_err);
    });
});
</script>

<select id="prefix"><option>Mr</option><option>Mrs</option><option>Miss</option><option>Ms</option></select>&nbsp;<input type="text" id="f_name" name="f_name" placeholder="First Name" />&nbsp;<input type="text" id="l_name" name="l_name" placeholder="Family Name" /><br />
<div class="form_err" id="name_err"></div>

Answer 1

您的代码有4个问题，让我们按出现的顺序解决它们：

您将事件作为变量e传递给了提交函数，因此变量event为undefined：

$('#addNew').submit(function(e) {
    event.preventDefault();

undefined.preventDefault();显然会在执行时使您的函数崩溃（因此这就是它“不起作用”的原因：该语句之后的所有内容都不会执行）。
固定：

$('#addNew').submit(function(event) {   // or just `e` instead of `event`
    event.preventDefault();             // or just `e` instead of `event`

然后您有：

  err_count++;
  name_err_count++;
  if(name_err_count > 0){

name_err_count将始终为 > 0，因为您刚刚对其进行了（后）递增。

解决方案：检查后增加错误计数器：

  if (name_err_count > 0) {  //you could omit the `> 0` check and inverse if/else
      // logic here
  } else {
      // logic here
  }
  err_count++;
  name_err_count++;

接下来，在您的姓氏 else处以 if结尾-检查：

  }else{
      name_err = '';
  }

因此，如果设置了element #l_name的值（而不是 ''），即使您的 name_err字符串包含先前的名字检查所生成的错误消息，也将被清除为 ''。

修复：将其删除（因为您的 name_err在初始化时已经是一个空字符串，并且如果都不适用，则不会被其他错误消息填充）。

还可以看看 If vs. else if vs. else statements?

最后，通过使用 $('#name_err').replaceWith(name_err);将元素 #name_err替换为未经过 id验证的 textnode（包含错误消息）。下次运行该函数时，没有要替换的 #name_err元素。

要解决此问题，您应该使用 elm.html()（或更可取的是 elm.text()）

也看看这个答案： What's the difference between jQuery's replaceWith() and html()?

因此（应用上述修复程序）这是您的更正代码（ jsfiddle here）：

$(document).ready(function (e) {
    $('#addNew').submit(function (event) {
        event.preventDefault();
        var err_count = 0;
        var name_err = '';
        var name_err_count = 0;
        if ($('#f_name').val() === '') { 
            name_err = 'You need a first name';
            err_count++;
            name_err_count++;
        }
        if ($('#l_name').val() === '') {
            if (name_err_count > 0) {
                name_err += ' and a last name.';
            } else {
                name_err += 'You need a last name';
            }
            err_count++;
            name_err_count++;
        } 
        $('#name_err').html(name_err);
    });
});

PS，您可以删除 name_error_count并仅检查您的 name_err评估为 TRUE还是 FALSE（空字符串在javascript中评估为 FALSE）并结合三元（以及一些其他优化方法），以简化操作/更易于阅读代码。

$(document).ready(function(e) {
    $('#addNew').submit(function(event) {
        var err_count = 0,
             name_err = '';
        event.preventDefault();
        if ($('#f_name').val() === '') { 
            name_err = 'a first name';
            err_count++;
        }
        if ($('#l_name').val() === '') {
            name_err += (name_err ? ' and ' : '')
                      + 'a last name';
            err_count++;
        }
     // example of simply adding a check (for a hobby)
     // if ($('#hobby').val() === '') {
     //     name_err += (name_err ? ' and ' : '')
     //               + 'a hobby';
     //     err_count++;
     // } 
        $('#name_err').html( name_err ? 'You need ' + name_err : '' );
    });
});

Example jsfiddle here。



另一种方法是使用数组保存您的部分错误消息（使用 arr.push()添加到其中）。这样，您可以使用 arr.length跟踪/计数错误的数量（如果需要，可以按部分，例如名称），并使用 arr.join(' and ')将它们转换为字符串，甚至在输出字符串时也可以： (arr.length ? 'You need ' + arr.join(' and ') : '')
注意：这样，您还可以通过在每个检查块之后执行 err_count+=arr_section_err.length;来简单地获取错误总数。换句话说，每个检查中的 err_count++;也可以删除。

看起来像这样：

$(document).ready(function(e) {
    $('#addNew').submit(function(event) {
        var err_count = 0,
             name_err = [];
        event.preventDefault();
        if($('#f_name').val() === '') name_err.push('a first name');
        if($('#l_name').val() === '') name_err.push('a last name');
     // if($('#hobby').val() === '') name_err.push('a hobby');      // TRIVIAL
        err_count+=name_err.length;
        $('#name_err').html( name_err.length 
                           ? 'You need ' + name_err.join(' and ')
                           : ''  
                           );
    });
});

Example jsfiddle here。

正如我刚刚解释的那样，JavaScript中的空字符串是虚假的，然后
if($('#f_name').val() === '') name_err.push('a first name');
等于
if(!($('#f_name').val())) name_err.push('a first name');
等于

$('#f_name').val() || name_err.push('a first name');
$('#l_name').val() || name_err.push('a last name');  // showcasing the beauty
$('#hobby').val()  || name_err.push('a hobby');      // note alignment on ||

Example jsfiddle here。如果你问我的话，很优雅也很简单。

如您所见，您可以继续按照最初的意图动态地构建错误消息（与使用if / else结构（反复地）检查元素值（的组合）并为每个组合具有完整的静态字符串（其他人）相反（建议）），导致“工作”（检查和DOM访问）呈指数级增长，而仅检查5个元素时，“意大利面条”代码却难以维护。）

希望这可以帮助！