onsubmit 事件處理程序 javascript 不起作用
[英]The onsubmit event handler javascript not working
問題描述
我有個問題。 當我點擊提交按鈕時，沒有任何反應，即使我用數字填寫了用戶名和密碼（我不希望用戶名和密碼包含任何數字，所以我確實為它設置了條件），也沒有警報顯示。 不知道問題出在哪里？ 你們能幫我解決這個問題嗎
注意：重置功能工作正常
function validateInput() { var firstName = document.forms["sign_up"]["firstName"]; var lastName = document.forms["sign_up"]["lastName"]; var email = document.forms["sign_up"]["email"]; var reg = /^[a-zA-Z]+$/; if (firstName.value !== '' || lastName.value !== '' || email.value !== '') { if (firstName.value.match(reg) && lastName.value.match(reg)) { alert("Form is submitted"); // return true; return false; // for the demo, so it doesn't submit } else { if (firstName.value.match(reg) === false) { document.getElementById("error").innerHTML = "Numbers are not allowed in username"; return false; } else if (lastName.value.match(reg) === false) { document.getElementById("error").innerHTML = "Numbers are not allowed in password"; return false; } } } } function reset() { document.getElementById("first").innerHTML = ""; document.getElementById("last").innerHTML = ""; document.getElementById("email").innerHTML = ""; }
<form id="sign_up" onsubmit="return validateInput()"> <p id="error"></p> <label for="firstName">First Name</label> <input type="text" id="firstName" value="" placeholder="Enter your first name"> <label for="lastName">Last Name</label> <input type="text" id="lastName" value="" placeholder="Enter your last name"> <label for="email">Email</label> <input type="email" id="email" value="" placeholder="Enter your email"> <button type="submit">Submit</button> <button type="button" onclick="reset();">Cancel</button> </form>
3 個解決方案
解決方案1
2 2020-09-21 04:20:39
在輸入中使用Pattern屬性進行驗證，如下所示
<input type="text" id="firstName" value="" pattern="[^0-9]*" title="Numbers are not allowed" placeholder="Enter your first name">
更多參考： https : //www.w3schools.com/tags/att_input_pattern.asp
對於重置功能，請使用reset
<input type="reset" value="reset">
這比為它創建一個特殊的函數要好，它可以節省你的行數:-)
解決方案2
1 已采納 2020-09-21 04:28:54
首先，盡量避免內聯事件處理程序，因為它們根本不被推薦。 同樣要重置表單值，您可以簡單地在表單上使用reset()方法。
此外，不要僅使用innerHTML來設置錯誤文本。 您可以改用更適合您的示例的textContent 。
您可以使用帶有submit事件的addEventListener來檢查您的firstname和lastname validation 。
我已經修復了您的code並且一切正常。
現場工作演示：
let form = document.getElementById("sign_up") var firstName = document.getElementById("firstName") var lastName = document.getElementById("lastName") var email = document.getElementById("email") var reset = document.getElementById("clearValues") var reg = /^[a-zA-Z]+$/; form.addEventListener('submit', function(e) { e.preventDefault() if (firstName.value != '' || lastName.value != '' || email.value != '') { if (firstName.value.match(reg) && lastName.value.match(reg)) { alert("Form is submitted"); } else if (!firstName.value.match(reg)) { document.getElementById("error").textContent = "Numbers are not allowed in username"; } else if (!lastName.value.match(reg)) { document.getElementById("error").textContent = "Numbers are not allowed in password"; } } }) reset.addEventListener('click', function(e) { document.getElementById("sign_up").reset(); })
input { display:block; }
<head> </head> <body> <form id="sign_up" action="#"> <p id="error"></p> <label for="firstName">First Name</label> <input type="text" id="firstName" value="" placeholder="Enter your first name"> <label for="lastName">Last Name</label> <input type="text" id="lastName" value="" placeholder="Enter your last name"> <label for="email">Email</label> <input type="email" id="email" value="" placeholder="Enter your email"> <button type="submit"> Submit </button> <button type="button" id="clearValues" onclick="reset();"> Cancel </button> </form> </body>
解決方案3
0 2020-09-21 04:05:45
您不需要在 onsubmit 事件中返回函數。 這應該可以正常工作。
<form id="sign_up" onsubmit="validateInput()">
HTML表單-通過onsubmit事件處理程序調用JavaScript
[英]HTML Forms - Calling JavaScript via the onsubmit event handler
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.