检查多个函数是否为真，然后执行某些操作

Question

我坚持认为我认为这是一个简单的PEBCAK错误。我在提交表单之前试图验证我的所有功能是否属实，但是无法想象我的生活有什么不对。以下是我的javascript代码：

function checknewaccount(){
if(emailvalid()&& checkname() && passwordcheck())
{
    return true;
}
else{
    return false;
}
}


function emailvalid()
{
      if(email condition)
      {
          return true;
      }
      else {
          return false;
      }
}

function checkname())
{
      if(name condition)
      {
          return true;
      }
      else {
          return false;
      }
}

function passwordcheck(){
      if(password condition)
      {
          return true;
      }
      else {
          return false;
      }
}

下面的HTML：

<form  id="newaccount" name="newaccount" method="post"  onSubmit="accountcode.php">
<input type="text" id="email" onBlur="emailvalid()"/>
<input type="text" id="username" onBlur="checkname()" />
<input type="password" id="password"  onkeyup="passwordcheck()"/>
<input type="submit" value="New" onClick="return checknewaccount()"/>
</form>

当我点击“新建，没有任何反应，我知道accountcode.php没有运行，因为数据库端没有任何反应，并且没有报告错误。

总结一下，我的问题是checknewaccount（）不起作用？它与我如何称呼它们有关吗？

我是javascript的新手，所以如果我完全关闭我的实现，我道歉。非常感谢您的帮助！

Answer 1

这部分很好（我冒昧地修改了缩进）：

function checknewaccount(){
    if(emailvalid()&& checkname() && passwordcheck())
    {
        return true;
    }
    else{
        return false;
    }
}

虽然你可以改进它：

function checknewaccount(){
    return emailvalid() && checkname() && passwordcheck();
}

这部分语法错误（温和地说）：

function emailvalid(), checkname(), passwordcheck(){
if(condition){
    return true;}
else{return false;}

如果这不是您的代码的真实引用，您将不得不更新您的问题（虽然我可能不会在这时更新此答案）。询问代码然后在问题中引用伪代码没什么意义。 （至少，伪代码缺少最后的}。）

同样的事情对于你的形式的功能是正确的：

function emailvalid()
{
      if(email condition)
      {
          return true;
      }
      else {
          return false;
      }
}

没关系（假设email condition 仍 psuedocode），但不需要if：

function emailvalid()
{
    return email condition;
}

就“没有任何反应”而言，请确保您拥有可以使用的调试工具。 Chrome内置了Dev Tools，只需按Ctrl + Shift + I即可。对于Firefox，您可以安装优秀的Firebug。最新版本的IE也有内置的开发工具（对于旧版本，您可以下载可以插入浏览器的免费Visual Studio版本）。其中任何一个都会告诉你有关语法和其他错误的信息，让你逐步完成你的代码陈述等，这对于弄清楚发生了什么是至关重要的。

这是我认为你想要做的一个快速虚线版本。我不会这样做，但我做了一些最小的改动，使它工作：

HTML：

<form action="http://www.google.com/search"
      method="GET" target="_blank"
      onsubmit="return checknewaccount()">
<input type="text" id="email" name='q' onblur="emailvalid()">
<input type="text" id="username" onblur="checkname()" >
<input type="password" id="password"  onkeyup="passwordcheck()">
<input type="submit" value="New">
</form>

注意事项：

• 作为Basiclife pointed out，您的form代码存在问题。这些都在上面修复。
• 上面我使用了action="http://www.google.com/search"但当然对你而言action="accountcode.php"（至少，我认为会这样）。
• 在表单提交处理程序中使用onsubmit，而在提交按钮上使用onclick。您无法通过提交按钮的onclick。
可靠地取消表单提交
• 在onsubmit中，请确保使用return - 例如onsubmit="return checknewaccount()"，而不是onsubmit="checknewaccount()" - 因为我们要确保事件内容看到返回值。我们不关心事件内容是否看不到我们其他检查的返回值（onblur="emailvalid()"），但如果我们这样做，我们也需要return。
• 上述字段中只有一个具有name属性;你们没有人这样做。只有具有name属性的字段才能与表单一起提交。我只为我的示例使用了一个name，因为我只想向Google提交一个字段，但出于您的目的，您将在所有三个字段上都需要name个属性。 This brief article讨论了id与name以及它们的用途。你有时想要两者。
• 我将属性全部放在小写中，这是最佳实践（如果您想使用XHTML，则需要）。
• 但是，我已从/的末尾删除了inputs。这有点偏离主题，但在您正在处理的明显级别，您不想尝试使用XHTML，使用HTML。在编写和服务器配置中，正确使用XHTML在技术上是困难的，即使这样你也必须将它作为标记汤提供给IE，否则它将无法正确处理它。 XHTML有它的位置，但在绝大多数情况下，没有理由使用它。
• 上面结合上面的JavaScript，对各个领域的处理程序没有任何意义。不过，我已经离开了他们，因为我认为你做的不仅仅是下面的检查 - 还有一个例子，显示那些处理程序做了一些有用的事情。

JavaScript的：

function checknewaccount() {
  return emailvalid() && checkname() && passwordcheck();
}

function emailvalid() {
  var element;

  // Get the email element
  element = document.getElementById('email');

  // Obviously not a real check, just do whatever your condition is
  return element.value.indexOf('@') > 0;
}

function checkname() {
  var element;

  // Get the username element
  element = document.getElementById('username');

  // Obviously not a real check, just do whatever your condition is
  return element.value.length > 0;
}

function passwordcheck() {
  var element;

  // Get the username element
  element = document.getElementById('password');

  // Obviously not a real check, just do whatever your condition is
  return element.value.length > 0;
}

Live copy

如果emailvalid等等，事情会略有变化。等等，功能会让用户知道字段无效，例如突出显示其标签：

HTML：

<form action="http://www.google.com/search"
      method="GET" target="_blank"
      onsubmit="return checknewaccount()">
<label>Email:  
<input type="text" id="email" name='q' onblur="emailvalid()"></label>
<br><label>Username:
<input type="text" id="username" onblur="checkname()" ></label>
<br><label>Password:
<input type="password" id="password"  onkeyup="passwordcheck()"/></label>
<br><input type="submit" value="New">
</form>

JavaScript的：

function checknewaccount() {
  var result;
  // Because we're actually doing something in each of the
  // three functions below, on form validation we want to
  // call *all* of them, even if the first one fails, so
  // they each color their field accordingly. So instead
  // of a one-liner with && as in the previous example,
  // we ensure we do call each of them:
  result = emailvalid();
  result = checkname() && result;
  result = passwordcheck() && result;
  return result;
}

function emailvalid() {
      var element, result;

  // Get the email element
  element = document.getElementById('email');

  // Obviously not a real check, just do whatever your condition is
  result = element.value.indexOf('@') > 0;

  // Update our label and return the result
  updateLabel(element, result);
  return result;
}

function checkname() {
  var element, result;

  // Get the username element
  element = document.getElementById('username');

  // Obviously not a real check, just do whatever your condition is
  result = element.value.length > 0;

  // Update our label and return the result
  updateLabel(element, result);
  return result;
}

function passwordcheck() {
  var element, result;

  // Get the username element
  element = document.getElementById('password');

  // Obviously not a real check, just do whatever your condition is
  result = element.value.length > 0;

  // Update our label and return the result
  updateLabel(element, result);
  return result;
}

function updateLabel(node, valid) {
  while (node && node.tagName !== "LABEL") {
    node = node.parentNode;
  }
  if (node) {
    node.style.color = valid ? "" : "red";
  }
}

Live copy

Answer 2

你的表单语法错误了 - onsubmit =要调用的js函数的名称，action = url ...

<form action="accountcode.php" id="newaccount" name="newaccount" method="post"  onSubmit="return checknewaccount()">
<input type="text" id="email" onBlur="emailvalid()"/>
<input type="text" id="username" onBlur="checkname()" />
<input type="password" id="password"  onkeyup="passwordcheck()"/>
<input type="submit" value="New"/>
</form>

经过全面测试的代码：

<html>
    <head>
        <script type="text/javascript">
        function checknewaccount() {
            return emailvalid() && checkname() && passwordcheck();
        }

        function emailvalid() {
             var emailAddress = document.getElementById('email').value;
             return (emailAddress=='test');
        }

        function checkname() {
             return true;
        }

        function passwordcheck() {
             return true;
        }

        </script>
    </head>
    <body>
    <form action="#" onsubmit="return checknewaccount();">
        <input type="text" id="email" name="email"/>
        <input type="submit"/>
    </form>
    </body>
</html>

如果文本框的值为 test

，则上述代码中的表单才会提交

稍微好一点的实现是：

<html>
    <head>
        <script type="text/javascript">
        function checknewaccount() {
            if(emailvalid() && checkname() && passwordcheck()) {
                return true;
            } else {
                document.getElementById('validation').innerHTML = 'Validation failed!';
                return false;
            }
        }

        function emailvalid() {
             var emailAddress = document.getElementById('email').value;
             return (emailAddress=='test');
        }

        function checkname() {
             return true;
        }

        function passwordcheck() {
             return true;
        }

        </script>
    </head>
    <body>
    <div id="validation"></div>
    <form action="#" onsubmit="return checknewaccount();">
        <input type="text" id="email" name="email"/>
        <input type="submit"/>
    </form>
    </body>
</html>

因为这至少告诉用户表单未提交。更好的方法是给用户一个更详细的理由，但这超出了这个问题的范围......