无法通过JavaScript提交表单到php

Question

我有一个html表单，我希望在POST之前在PHP中运行Javascript中的验证。然而，尽管我已经为每个输入标签分配了名称并在form标签中指定了一个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> 

按钮调用我用发送到PHP之前验证我的表单值的JavaScript函数：

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" 
     }) 
     } 
    } 

Answer 1

由于某些原因，某些JavaScript实现混合了HTML元素ID和代码。如果您使用不同的ID为您的提交按钮，将工作（的id="somethingelse"代替id="submit"）：

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

（我认为id="submit"有提交方法被覆盖的形式节点上，使用按钮节点的作用。我从来没有想出为什么，也许允许像form.buttonid.value等快捷方式等，我只是避免使用可能的方法名称作为ID。）

Answer 2

我想如果你实时做，会更好，当用户离开每个输入时发送错误。例如，有一个输入，您可以在其中设置电子邮件地址。当Javascript中发生onfocusout事件时，您可以添加一个eventlistener，它将一个检查函数调用到电子邮件输入中。 有一个处理表单输入的简单例子。 （代码如下） 它不能保护你免受严重的攻击，因为在一个完美的系统中，你必须检查双方。

说明了JavaScript示例：

• 有两个输入电子邮件和密码，还有一个隐藏按钮，如果一切是正确的，其显示。
• 电子邮件检查和密码检查功能正在检查输入字段值，如果它不是3标记长度，则显示用户错误。
• showIt funciton得到一个布尔值，如果它是真的，它显示按钮提交。
• 最后一个函数遍历字段对象，我们在其中存储输入字段的状态，如果有错误，则返回false否则其为真。这是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> 

Answer 3

我不知道为什么这不起作用，但你得到解决如果你使用form.submit();一个<input type="submit"/>而不是<input type="button"/>，然后使用onsubmit事件而不是onclick。这样，IIRC，你所要做的就是返回真或假。