無法通過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，你所要做的就是返回真或假。