在表单提交上调用多个函数？答案

【问题标题】：Calling multiple functions on form submit?在表单提交上调用多个函数？
【发布时间】：2013-09-12 20:34:10
【问题描述】：

我正在尝试进行 JavaScript 表单验证，为此我需要调用多个函数。一个用于验证电子邮件，一个用于密码（目前只有两个似乎有效），另一个用于性别、年级、名字和姓氏。

这是我的 Javascript 代码：

function emailmatch() { 
  var emailone = document.forms['input']['email'].value;
  var emailtwo = document.forms['input']['email1bID'].value;
  var passwordone = document.forms['input']['password'].value;
  var passwordtwo = document.forms['input']['password1bID'].value;

  if ( emailone != emailtwo ) {
    alert ( "Emails do not match!" );
    document.forms['input']['email'].value = '';
    document.forms['input']['email1bID'].value = '';
    return false;
  }

  else if ( passwordone != passwordtwo ) {
    alert ( "Passwords do not match!" );
    document.forms['input']['password'].value = '';
    document.forms['input']['password1bID'].value = '';
    return false;
  }

  return true;
}

function checkFirstname() {
  var firstname = document.forms['input']['firstname'].value;
  if (firstname == null) { return false; }
  return true;
}

function checkLastname() {
  var lastname = document.forms['input']['lastname'].value;
  if (lastname == null) { return false; }
  return true;
}

function checkGender() {
  var gender = document.forms['input']['gender'].value;
  if (gender == null) { return false; }
  return true;
}

function validateform() {
  var validation = true;
  if ((emailmatch() && checkFirstname() && checkLastname && checkgender()) == true) return validation;
}

然后是html表单：

<form name="input" id="input" onSubmit="return validateform()" method="GET" action="code.php">
  <tr><td>First name:</td><td> <input type="text" name="firstname" value=""></td></tr> <br />
  <tr><td>Last name:</td><td> <input type="text" name="lastname" value=""></td></tr> <br />
  <tr><td>Gender:</td><td> <input type="radio" name="gender" id="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td></tr> <br />
  <tr><td>Grade:</td><td> <input type="radio" name="grade" value="9"> 9 <input type="radio" name="grade" value="10"> 10 <input type="radio" name="grade" value="11"> 11 <input type="radio" name="grade" value="12"> 12<br /> </td></tr>
  <tr><td>Email:</td><td> <input type="text" name="email" id="email" value=""></td></tr> <br />
  <tr><td>Verify Email:</td><td> <input type="text" name="email1b" id="email1bID" value=""></td></tr> <br />
  <tr><td>Password:</td><td> <input type="password" name="password" id="password" value=""></td></tr> <br />
  <tr><td>Verify Password:</td><td> <input type="password" name="password1b" id="password1bID" value=""></td></tr> <br />
  <tr><td colspan="2"><center><input type="submit" value="Submit"></center></td></tr>
</form>

所以总的来说，我已经创建了所有函数，甚至创建了一个函数来在提交时调用它们，尽管唯一真正起作用的是电子邮件和密码。它调用将其输入数据库的代码（这也在工作），所以这不是问题。验证码哪里出错了？

【问题讨论】：

您还没有说出您遇到的错误是什么。请详细说明什么不起作用。
这看起来很简单，可以使用 firebug 进行调试
不要将值与null 进行比较。比较""

标签： javascript html forms function

【解决方案1】：

因为你永远不会返回 false！

    function validateform()
    {   var validation = true;  <-- set to true
        if ((emailmatch() && checkFirstname() && checkLastname && checkgender())== true)
    return validation;  <--- returns true
    <-- if false you do not return anything
   }

要么添加 return false，要么将其更改为包含所有检查的 return。

   function validateform () {   
       return emailmatch() && checkFirstname() && checkLastname && checkgender();
   }

当你明白这一点后，你必须意识到空字符串不是空的。

【讨论】：

【解决方案2】：

使用事件点击按钮<input type="button" value="Submit" onclick="validateform();"/>

并通过 javascript 提交表单。

function validateform()
{
    var validation = true;
    if( (emailmatch() && checkFirstname() && checkLastname && checkGender())== true)
    document.forms['input'].submit();
}

<form name="input" id="input" method="GET" action="code.php">
<tr><td>First name:</td><td> <input type="text" name="firstname" value=""></td></tr> <br />
<tr><td>Last name:</td><td> <input type="text" name="lastname" value=""></td></tr> <br />
<tr><td>Gender:</td><td> <input type="radio" name="gender" id="gender" value="male">Male <input type="radio" name="gender" value="female">Female</td></tr> <br />
<tr><td>Grade:</td><td> <input type="radio" name="grade" value="9"> 9 <input type="radio" name="grade" value="10"> 10 <input type="radio" name="grade" value="11"> 11 <input type="radio" name="grade" value="12"> 12<br /> </td></tr>
<tr><td>Email:</td><td> <input type="text" name="email" id="email" value=""></td></tr> <br />
<tr><td>Verify Email:</td><td> <input type="text" name="email1b" id="email1bID" value=""></td></tr> <br />
<tr><td>Password:</td><td> <input type="password" name="password" id="password" value=""></td></tr> <br />
<tr><td>Verify Password:</td><td> <input type="password" name="password1b" id="password1bID" value=""></td></tr> <br />

还要看看你的函数：checkGender()，在你调用 checkgender() 的 if 语句中

【讨论】：