Question

为什么我的条件陈述不能正常运作？我想同时显示错误消息。

function validate() {
  if (firstName.value == "") {
    document.getElementById('error').innerHTML = "*Field is empty";
    return false;
  } else if (lastName.value == "") {
    document.getElementById('errorTwo').innerHTML = "*Field is empty";
    return false;
  } else {
    return true;
  }
}

<form name="form" action="action.php" method="post" onsubmit="return validate()">
  <div class="wrapper">
    <span>Name</span>
    <br>
    <input type="text" name="firstName" id="firstName" placeholder="First Name" onfocus="this.placeholder=''" onblur="this.placeholder='First Name'" />&nbsp;
    <label id="error"></label>
    <br>
    <input type="text" name="middleName" id="middleName" placeholder="Middle Name (optional)" onfocus="this.placeholder=''" onblur="this.placeholder='Middle Name (optional)'" />
    <input type="text" name="lastName" id="lastName" placeholder="Last Name" onfocus="this.placeholder=''" onblur="this.placeholder='Last Name'" />&nbsp;
    <label id="errorTwo"></label>
    <br>
    <br>
  </div>

Answer 1

您的条件陈述工作正常，但您对它们的理解有点偏差。

当条件匹配时，if / else if语句将停止运行，因此如果firstName.value为空，那么if语句将匹配，代码将从那里退出而不评估其他条件。

您希望为每个测试使用独立的条件语句，而不是返回true或false，将变量设置为true或false，并在条件检查后返回该变量。

因此...

function validate()
{
  var valid = true;
  if(firstName.value=="")
  {
      document.getElementById('error').innerHTML="*Field is empty";
      valid = false;
  }

  if(lastName.value=="")
  {
      document.getElementById('errorTwo').innerHTML="*Field is empty";
      valid = false;
  }

  return valid;
}

只是关于代码本身的注释，上面的注释主要是正确的，如果你发布整个代码，你可能会得到更多有用的回复。此外，您可以消除检查的==""部分，只测试变量的值，因为空字符串的计算结果为false。

Answer 2

不要将验证与if-else链接在一起，否则如果第一个名称验证失败，那么您将永远不会检查姓氏验证。

Answer 3

通过快速创建JsFiddle来帮助自己： - ）

这是： http://jsfiddle.net/23tnpve4/1/

您可以通过尝试轻松看到一些问题：

正如其他人提到的，缺少括号等
正如其他人提到的，如果第一次测试失败，则不会检查其他字段，因此只能逐步纠正错误。
没有代码可以刷新您的错误DIV。在新的表单检查中，必须首先清除错误字段。检查表单是具有多种可能的启动状态的循环。

尝试收集数组中字段的状态并稍后进行处理，如下所示：

window.validate = function()
{
  var firstName = document.getElementById('firstName');
  var lastName = document.getElementById('lastName');

  // Clear
  firstName.val('');
  lastName.val('');

  // Check
  var errorNames = [];
  if(firstName.value=="")
  {
    errorNames.push('firstName');
  }

  if(lastName.value=="")
  {
    errorNames.push('lastName');
  }

  // Inform
  for (var i=0; i<errorNames.length; i++) {
    document.getElementById(errorNames[i]).innerHTML="*Field is empty";
  }

  // Return value
  return errorNames.length == 0;
}

此代码的概念将更直观地工作。我还没有对打字错误进行检查，这是一个草案，但我希望它能帮助你。

在表单验证中同时显示所有错误消息

3 个答案: