Can'；t通过javascript向php提交表单

我有一个html表单，我想在发布到PHP之前先用Javascript进行验证。然而，尽管我已经为每个输入标记指定了名称，并在表单标记中指定了一个action属性，但到PHP部分的链接似乎不起作用

以下是表单的HTML代码：

<form id="signupform" action="signupform.php" method="post">
  <input type="text" name="Email" placeholder="Email Address" class="signupinput" id="email" />
  <br />
  <input type="password" name="Password" placeholder="Password" class="signupinput" id="passwordone" />
  <br />
  <input type="password" placeholder="Repeat Password" class="signupinput" id="passwordtwo" />
  <br />
  <input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="submit" />
</form>

该按钮调用javascript函数，我使用该函数在发送到php之前验证表单的值：

function verifypass() {
  var form = document.getElementById("signupform");
  var email = document.getElementById("email").value;
  var password1 = document.getElementById("passwordone").value;
  var password2 = document.getElementById("passwordtwo").value;
  var emailcode = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if (emailcode.test(email)) {
        if (password1.length > 6) {
          if (password1 == password2) {
            form.submit(); //this statement does not execute
          } else {
            $("#passwordone").notify("Passwords do not match!", {
              position: "right"
            })
          }
        } else {
          $("#passwordone").notify("Password is too short!", {
            position: "right"
          })
        }
      } else {
        $("#email").notify("The email address you have entered is invalid.", {
          position: "right"
        })
      }
    }

函数验证过程（）{
var form=document.getElementById（“signupform”）；
var email=document.getElementById（“email”）.value；
var password1=document.getElementById（“passwordone”）.value；
var password2=document.getElementById（“password2”）.value；
var emailcode=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\\，；：\s@“]+）*（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}]）；（[a-zA Z-0-9]+++]；
if（emailcode.test（电子邮件））{
如果（密码1.length>6）{
if（password1==password2）{
form.submit（）；//此语句不执行
}否则{
$（“#passwordone”）。通知（“密码不匹配！”{
位置：“右”
})
}
}否则{
$（“#passwordone”）。通知（“密码太短！”{
位置：“右”
})
}
}否则{
$（“#电子邮件”）。通知（“您输入的电子邮件地址无效。”{
位置：“右”
})
}
}

我认为如果您实时执行该操作会更好，因为当用户离开每个输入时会出现发送错误。例如，有一个输入，您可以在其中设置电子邮件地址。当在Javascript中发生onfocusout事件时，您可以向电子邮件输入添加一个eventlistener，它是一个调用checker函数的函数。 这里有一个处理表单输入的快速示例。（代码如下） 它不能保护您免受严重的攻击，因为在一个完美的系统中，您必须检查两侧

Javascript示例的说明：

• 有两个输入电子邮件和密码，还有一个隐藏的按钮，如果一切都正确就会显示出来
• 电子邮件检查和密码检查功能检查输入字段值，如果不是3标记长度，则为用户显示错误
• showIt函数获取一个布尔值，如果为true，则显示要提交的按钮
• 最后一个函数是遍历存储输入字段状态的fields对象，如果存在false，则返回false，否则返回true。这是showIt函数得到的布尔值

希望这是可以理解的

<style>
#send {
  display: none;
}
</style>
<form>
<input type="text" id="email"/>
<input type="password" id="password"/>
<button id="send" type="submit">Send</button>
</form>
<div id="error"></div>

<script>
var fields = {
    email: false,
  password: false
};

var email = document.getElementById("email");
email.addEventListener("focusout", emailCheck, false);
var password = document.getElementById("password");
password.addEventListener("focusout", passwordCheck, false);

function emailCheck(){
    if(email.value.length < 3) {
    document.getElementById("error").innerHTML = "Bad Email";
    fields.email = false;
  } else {
    fields.email = true;
    document.getElementById("error").innerHTML = "";
  }
  show = checkFields();
  console.log("asdasd"+show);
  showIt(show);
}

function passwordCheck(){
    if(password.value.length < 3) {
    document.getElementById("error").innerHTML = "Bad Password";
    fields.password = false;
  } else {
    fields.password = true;
    document.getElementById("error").innerHTML = "";
  }
  show = checkFields();
  console.log(show);
  showIt(show);
}

function showIt(show) {
    if (show) {
    document.getElementById("send").style.display = "block";
  } else {
    document.getElementById("send").style.display = "none";
  }
}


function checkFields(){
    isFalse = Object.keys(fields).map(function(objectKey, index) {
    if (fields[objectKey] === false) {
        return false;
    }
    });
  console.log(isFalse);
  if (isFalse.indexOf(false) >= 0) {
    return false;
  }
  return true;
}
</script>

#发送{
显示：无；
}
发送
变量字段={
电子邮件：false，
密码：false
};
var email=document.getElementById（“电子邮件”）；
email.addEventListener（“focusout”，emailCheck，false）；
var password=document.getElementById（“密码”）；
password.addEventListener（“focusout”，passwordCheck，false）；
函数emailCheck（）{
如果（email.value.length<3）{
document.getElementById（“错误”）.innerHTML=“坏邮件”；
fields.email=false；
}否则{
fields.email=true；
document.getElementById（“错误”）.innerHTML=“”；
}
show=checkFields（）；
console.log（“asdasd”+显示）；
showIt（show）；
}
函数密码检查（）{
if（password.value.length<3）{
document.getElementById（“错误”）.innerHTML=“密码错误”；
fields.password=false；
}否则{
fields.password=true；
document.getElementById（“错误”）.innerHTML=“”；
}
show=checkFields（）；
console.log（show）；
showIt（show）；
}
函数showIt（show）{
如果（显示）{
document.getElementById（“发送”）.style.display=“块”；
}否则{
document.getElementById（“发送”）.style.display=“无”；
}
}
函数checkFields（）{
isFalse=Object.keys（fields）.map（函数（objectKey，索引）{
if（字段[objectKey]==false）{
返回false；
}
});
console.log（isFalse）；
if（isFalse.indexOf（false）>=0）{
返回false；
}
返回true；
}

出于某种原因，一些JavaScript实现将HTML元素ID和代码混为一谈。如果您对“提交”按钮使用不同的ID，它将起作用（

ID=“somethingelse”

而不是

ID=“提交”

）：

---

（我认为

id=“submit”

的效果是，表单节点上的submit方法会被使用按钮节点覆盖。我从来没有弄清楚原因，可能是为了允许像

form.buttonid.value

等快捷方式。我只是避免使用可能的方法名称作为id。）

我不确定为什么这不起作用，但是您可以不必调用

form.submit（）

如果使用

而不是

，然后使用

onsubmit

事件而不是

onclick

。这样，IIRC，您所要做的就是返回true或false。

您的控制台在form.submit（）上说了什么？允许用户使用他们想要的。永远不要存储纯文本密码！请使用PHP来处理密码安全性。如果您使用的PHP版本低于5.5，则可以使用

密码\u hash（）

。在散列之前，请确保对它们进行了清理或使用了任何其他清理机制。这样做会更改密码并导致不必要的额外编码。

<input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="somethingelse" />