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

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是伪代码),但不需要: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指出的那样,您的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所有三个字段的属性.这篇简短的文章讨论了idvs. 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;
}

实时复制

如果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";
  }
}

实时复制

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>

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