我在 PHP 頁面中有以下表單<form action="login.php" method="post"> School: <input type="text" name="schoolInput"><div id="erschool"></div><br> Username: <input type="text" name="usernameInput"><div id="eruser"></div><br> Password: <input type="text" name="passwordInput"><div id="erpass"></div> <input type="button" name="loginSubmit" value="submit" onclick="return validateLogin()"></form>我的驗證看起來像這樣function validateLogin() { var school = document.getElementsByName("schoolInput")[0].value var username = document.getElementsByName("usernameInput")[0].value var password = document.getElementsByName("passwordInput")[0].value var failed = false; if(!school){ document.getElementById("erschool").innerHTML = "No school entered"; failed = true; } if(!username){ document.getElementById("eruser").innerHTML = "No username entered"; failed = true; } if(!password){ document.getElementById("erpass").innerHTML = "No password entered"; failed = true; } if(failed){ return failed; } return true;}驗證中的 JS 在激活錯誤消息時起作用。但是，如果表單正確填寫，它不會按應有的方式加載login.php。我正在 Heroku 上運行該應用程序進行測試。我究竟做錯了什么？
2 回答
小怪獸愛吃肉
TA貢獻1852條經驗 獲得超1個贊
您需要使用<button type=submit">來提交表格。此外，您還可以將驗證移至表單中。IE：
<form action="login.php" method="post" onclick="return validateLogin()">
School: <input type="text" name="schoolInput"><div id="erschool"></div><br>
Username: <input type="text" name="usernameInput"><div id="eruser"></div><br>
Password: <input type="text" name="passwordInput"><div id="erpass"></div>
<button type="submit" name="loginSubmit" value="submit">
</form>
另外，您的驗證函數是錯誤的 - 它總是返回 true（因此表單將始終被提交）：
if(failed){
return failed; // if failed is true, then return TRUE...
}
return true; // ....otherwise return TRUE!!
我想你的意思是返回，!failed所以如果failed是 true 那么你返回 false 嗎？
您實際上不需要檢查failed兩者的值 - 您只需返回!failed：
如果 failed 為 true，則將!failed返回 false，因此不會提交表單
如果 failed 為 false，則!failed返回 true，以便提交表單
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
如何讓它發揮作用
您可能想要實現的是：
<button type="button" onclick="if(validateLogin()) this.form.submit()">
這樣，只有當函數返回 TRUE 時，您的表單才會被提交。（正如 @FluffyKitten 指出的那樣，情況總是如此，所以你也必須修復驗證函數。）
驗證表單的方法不止一種。我最喜歡的是為表單提供一個onsubmit處理程序，并且您在按鈕上使用的語法看起來像是您試圖將此技術與按鈕單擊驗證方法混合在一起。表單 onsubmit 方式如下所示：
<form onsubmit="return validateLogin()">
...
...
<button type="submit">
</form>
這是兩種不同的方式。
方法一：form onsubmit=return valid()+button type=submit
方法2：form+button type=button onclick=if(valid()) submit()
改進驗證登錄
我建議在這里進行一些重構，以提高可讀性和易用性。
function validateLogin() {
var checkEmpty = function(name) {
var element = document.getElementsByName(name+"Input")[0];
if(element.value !== "") return false; // return if not empty
var errorField = document.getElementById("er"+name);
errorField.innerHTML = "No value for "+name;
return true;
}
if(checkEmpty("school" )) return false;
if(checkEmpty("username" )) return false;
if(checkEmpty("password" )) return false;
return true;
}
- 2 回答
- 0 關注
- 160 瀏覽
添加回答
舉報
0/150
提交
取消