当前位置： 文江博客话题详情

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

发布于 2024-10-07 10:05:22 字数 1267 浏览 4 评论 0原文

我被困在我认为是一个简单的 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 新手，所以如果我完全不了解我的实现，非常感谢您的帮助！

原文

I am stuck on what I thought was a simple PEBCAK error on my part. I am trying to verify all of my functions are true before I submit a form, but cannot figure for the life of me what is wrong. Below is my javascript code:

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 below:

<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>

When i click "New, nothing happens, and I know the accountcode.php is not running, because nothing happens on the database end and there are no errors reported.

To sum up, my question is how checknewaccount() does not work? Does it have something to do with how I am calling them?

I am new to javascript so if I am completely off on my implementation, I apologize. Thank you very much for the help!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

吻安 2024-10-14 10:05:23

你的表单语法错误 - 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>

上述代码中的表单仅在文本框的值为 时才会提交测试

一个稍微好一点的实现是：

<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>

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

you've got the form syntax wrong - onsubmit = the name of the js function to call, action = the 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>

Fully tested code:

<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>

The form in the above code will only submit if the textbox has a value of test

A slightly better implementation would be:

<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>

As this at least tells the user the form wasn't submitted. Even better would be to give the user a more detailed reason why but that's beyond the scope of this question...

回复 原文
焚却相思 2024-10-14 10:05:23

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

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;
      }
}

没关系（假设 电子邮件条件是still psuedocode），但不需要if：

function emailvalid()
{
    return email condition;
}

就“什么也没发生”而言，请确保您拥有可以使用的调试工具。 Chrome 内置了开发工具，只需按 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 属性三个领域。 这篇简短的文章讨论了 id< /code> 与 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";
  }
}

实时副本

This part's fine (I took the liberty of fixing the indentation):

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

Although you could improve it:

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

This part is a syntax error (to put it mildly):

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

If that's not a real quote from your code, you'll have to update your question (though I may not be here by then to update this answer). Not much point in asking about code and then quoting pseudo-code in the question. (At the very least, the pseudo-code is missing the final }.)

The same sort of thing is true for your functions in the form:

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

That's fine (assuming that email condition is still psuedocode), but there's no need for the if:

function emailvalid()
{
    return email condition;
}

In terms of "nothing happens," make sure you have debugging tools you can use. Chrome has Dev Tools built in, just press Ctrl+Shift+I. For Firefox, you can install the excellent Firebug. Recent versions of IE have dev tools built into them as well (for older versions you can download a free version of Visual Studio that can plug into the browser). Any of these will tell you about syntax and other errors, let you walk through your code statement-by-statement, etc., which is crucial to figuring out what's happening.

Here's a quickly dashed-off version of what I think you're trying to do. I wouldn't do it this way, but I've made the minimal changes to make it work:

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>

Notes on that:

  • As Basiclife pointed out, your form code has issues. Those are fixed above.
  • Above I've used action="http://www.google.com/search" but of course for you it would be action="accountcode.php" (or at least, I think it would).
  • Use onsubmit for the form submission handler, not onclick on the submit button. You can't cancel a form submission reliably cross-brower via the submit button's onclick.
  • In onsubmit, make sure you use return — e.g., onsubmit="return checknewaccount()", not onsubmit="checknewaccount()" — because we want to make sure the event stuff sees the return value. We don't care if the event stuff doesn't see the return value of our other checks (onblur="emailvalid()"), but if we did, we'd need returns there as well.
  • Only one of the fields above has a name attribute; none of yours do. Only fields with name attributes get submitted with forms. I've only used one name for my example because I only want to submit one field to Google, but for your purposes, you're going to want name attributes on all three fields. This brief article has a discussion of id vs. name and what they're for. You sometimes want both.
  • I've put the attributes in all lower-case, which is best practice (and required if you want to use XHTML).
  • However, I've removed the / from the ends of the inputs. This is a bit off-topic, but at the apparent level you're working at, you don't want to try to use XHTML, use HTML. Using XHTML correctly is technically difficult, both in authoring and server configuration, and even then you have to serve it as tag soup to IE or it won't handle it properly. XHTML has its place, but in the vast majority of cases, there's no reason to use it.
  • With the above combined with the JavaScript below, there's no purpose whatsoever to the handlers on the individual fields. I've left them, though, because I assume you're doing more than just the checks below — there's an example further down showing those handlers doing something useful.

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

Things change slightly if the emailvalid, et. al., functions are going to do something to let the user know the fields are invalid, such as highlighting their labels:

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

回复 原文
~没有更多了~

关于作者

追风人

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文