javascript警報拒絕在表單驗證中工作？
[英]javascript alerts refuse to work in form validation?
問題描述
我一直在嘗試一切以使這些警報正確彈出。 我開始使用嵌套函數，然后將它們扔掉並將其全部放在一個函數中，現在當我在填寫任何一個文本框后按Enter時，它什么都不做，只是將字符串放在url中，而不是像警告一樣是以前。 我不確定它是我的函數調用還是其他調用，因為我仔細檢查了所有內容，所有這些似乎都對我有用。 這是不執行任何操作的完整代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- VARIABLE DECLARATION -->
f1.city.focus();
function check_form()
{
at_sign = email.search(/@/);
if(document.f1.city.value.length < 1)
{
alert('Please enter a city');
f1.city.focus();
}
else if(document.f1.state.value.length != 2 || !(state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
{
alert('Please enter a state in abreviated form');
f1.state.focus();
}
else if(document.f1.zip.value.length != 5 || document.f1.zip.value.isNaN()==true)
{
alert('Please enter a 5 digit zip code');
f1.zip.focus();
}
else if((at_sign<1) || (email.length<3))
{
alert('Please enter a valid email address');
f1.email.focus();
}
else
{
document.write("Form completed");
}
}
</SCRIPT>
</HEAD>
<BODY >
<form name = "f1" action="smartform.html">
<b>City</b>
<input type = "text" name = "city" size = "18" value="" onSubmit = "javascript:check_form()">
<b>State</b>
<input type = "text" name = "state" size = "4" value="" onSubmit = "javascript:check_form()">
<b>Zip Code</b>
<input type = "text" name = "zip" size = "5" value="" onSubmit = "javascript:check_form()">
<b>Email</b>
<input type = "text" name = "email" size = "18" value="" onSubmit = "javascript:check_form()">
<input type = "submit" name = "button" value = "Done" onclick = "javascript:check_form()">
</form>
</BODY>
</HTML>
編輯：似乎什么都沒有，每個人都說..這是我的新代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">
f1.city.focus();
function check_form(f1)
{
var at_sign = f1.email.search(/@/);
if(f1.city.value.length < 1)
{
alert('Please enter a city');
f1.city.focus();
return false;
}
else if(f1.state.value.length != 2 || !(f1.state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
{
alert('Please enter a state in abreviated form');
f1.state.focus();
return false;
}
else if((f1.zip.value.length != 5) || (f1.zip.value.isNaN()==true))
{
alert('Please enter a 5 digit zip code');
f1.zip.focus();
return false;
}
else if((at_sign<1) || (f1.email.length<3))
{
alert('Please enter a valid email address');
f1.email.focus();
return false;
}
else
{
//document.write("Form completed");
}
return false;
}
</SCRIPT>
</HEAD>
<BODY >
<form name = "f1" onSubmit="return check_form(this)">
<b>City</b>
<input type = "text" name = "city" size = "18" value="">
<b>State</b>
<input type = "text" name = "state" size = "4" value="">
<b>Zip Code</b>
<input type = "text" name = "zip" size = "5" value="">
<b>Email</b>
<input type = "text" name = "email" size = "18" value="">
<input type = "submit" name = "button" value = "Done" onclick = "return check_form(this)">
</form>
<b>hi</b>
</BODY>
</HTML>
仍然沒有警報...我把它打起來並得到..但沒有警報...
好吧，我知道我可能應該使用getElementByID，但是我的新重點是准確找出為什么我的代碼無法正常工作。 由於我的講課大綱示例未使用此方法，因此我想弄清楚以下代碼為什么不像以前那樣激活警報。 我將其簡化為：
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Smart Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function check_form()
{
document.write("Form started");
var at_sign = document.f1.email.search(/@/);
if(document.f1.city.value.length < 1)
{
alert('Please enter a city');
document.f1.city.focus();
//return false;
}
else if(document.f1.state.value.length != 2 || !(document.f1.state.charCodeAt('0')>=65 && document.f1.state.charCodeAt('0')<=91))
{
alert('Please enter a state in abreviated form');
document.f1.state.focus();
//return false;
}
else if(document.f1.zip.value.length != 5 || isNaN(document.f1.zip.value)==true)
{
alert('Please enter a 5 digit zip code');
document.f1.zip.focus();
//return false;
}
else if((at_sign<1) || (document.f1.email.value.length<3))
{
alert('Please enter a valid email address');
document.f1.email.focus();
//return false;
}
else
{
document.write("Form completed");
}
}
</SCRIPT>
</HEAD>
<BODY onLoad= "javascript:document.f1.city.focus();">
<form name = "f1" action="smartform1.html" onSubmit="javascript:check_form();">
<b>City</b>
<input type = "text" name = "city" size = "18">
<b>State</b>
<input type = "text" name = "state" size = "4">
<b>Zip Code</b>
<input type = "text" name = "zip" size = "5">
<b>Email</b>
<input type = "text" name = "email" size = "18">
<input type = "submit" name = "button" value = "Done" onclick = "javascript:check_form();">
</form>
</BODY>
</HTML>
我沒有在控制台中看到任何錯誤，現在當我輸入內容時，我得到了“ form start”測試行的出現，並伴隨着一些神秘的錯誤，然后所有錯誤消失並顯示了表單。 但是我的問題是，為什么在達到此結果的過程中沒有發生警報？ 即使頁面被覆蓋，它仍然應該彈出。 另外，有沒有一種方法可以在代碼被覆蓋之前通過代碼/和/或調試將其暫停？ 所以我的基本問題是：為什么不彈出警報，以及如何使警報彈出，並且焦點保持在if / else語句中函數未使用的正確字段中？
更新2：我做了一個快速的錯誤的屏幕截圖，事實證明f1.email等是未定義的，的確導致事情不起作用。 所以我仍然想知道如何使用代碼或在調試器中將其暫停，帖子和鏈接似乎並沒有100％清晰可見。 一旦我處於協奏曲並處於調試模式，我到底從那里去讓程序在出錯時暫停？
還：如果我在標頭的腳本頂部聲明了getElementByID變量，然后在函數中使用它們，那么在沒有所有其他事件處理方法的情況下是否可以使用？ 我正在嘗試輸入。
3 個解決方案
解決方案1
1 已采納 2014-10-18 05:06:39
您應該將提交偵聽器放在表單上，並傳遞對表單的引用，並返回函數返回的任何值，例如
<form onsubmit="return check_form(this);" ...>
您應該使用控件的名稱將控件作為表單的屬性來引用，不要將名稱用作全局變量。 並聲明所有變量。
因此該函數如下所示：
function check_form(form) {
var at_sign = email.search(/@/);
if (form.city.value.length < 1) {
alert('Please enter a city');
f1.city.focus();
// cancel submit by returning false
return false;
} else if (form.state.value.length != 2 || !(form.state.charCodeAt(0) >=65 && state.charCodeAt(0)<=91)) {
alert('Please enter a state in abreviated form');
f1.state.focus();
return false;
}
...
}
您可能應該使用正則表達式或查找而不是charCodeAt來驗證狀態值。
頁面加載完成后（例如，提交表單時）使用document.write將在寫入新內容之前擦除頁面的全部內容。
編輯
這是您的新代碼有什么問題：
<SCRIPT LANGUAGE="JavaScript">
擺脫語言屬性。 這不是有害的（嗯，在非常具體的情況下可能是有害的）。
f1.city.focus();
f1尚未定義或初始化（請參見上面有關元素名稱和全局變量的注釋）
function check_form(f1)
{
var at_sign = f1.email.search(/@/);
f1.email是輸入元素，它沒有搜索屬性，您不能調用它。 它確實具有一個字符串形式的value屬性，也許您的意思是：
var at_sign = f1.email.value.search(/@/);
然后是：
else if(f1.state.value.length != 2 || !(f1.state.charCodeAt('0')>=65 && state.charCodeAt('0')<=91))
同樣，您忘記了三個表達式中的兩個表達式的value屬性，而忘記了在第三個表達式中使用f1 。 你要：
else if(f1.state.value.length != 2 || !(f1.state.value.charCodeAt(0)>=65 && f1.state.value.charCodeAt(0)<=91))
請注意，這要求用戶使用大寫字母輸入狀態，這可能有助於告訴他們。
然后是：
else if((f1.zip.value.length != 5) || (f1.zip.value.isNaN() == true))
isNaN是全局變量，而不是字符串方法。 如果未輸入任何值，則該值為空字符串， isNaN('')返回false。 如果要測試是否輸入了5位數字，請使用：
else if (!/^\d{5}$/test(f1.zip.value))
無需使用true進行測試，也無需對簡單表達式進行分組：
else if (f1.zip.value.length != 5 || isNaN(f1.zip.value))
最后，如果所有測試通過：
return false;
阻止表單提交。 您可以忽略此return語句，返回undefined將使表單提交。 或者，如果您確實想要，則返回true 。
解決方案2
1 2014-10-18 05:25:56
好的，我想回答您的問題，但首先要首先瀏覽代碼並進行清理。 將此用作正確格式的代碼的模板：
<!DOCTYPE html>
<html>
<head>
<title>Smart Form</title>
</head>
<body>
<!-- Code goes here -->
<script type="text/javascript">
</script>
</body>
</html>
標簽和屬性不需要大寫。 JavaScript注釋如下：
/** Comment. */
HTML評論是這樣的：
<!-- Comment. -->
另外，nitpick：屬性后應跟等號而不是空格。 即
<form name="f1" id="smartForm" action="smartform.html"> ... </form>
接下來進行適當的事件綁定。
var smartForm = document.getElementById('smartForm');
smartForm.addEventListener('submit', validateForm);
接下來，我將教您如何快速真正地釣魚，這樣您就可以弄清楚為什么這對您來說很壞，以及將來如何修復這些錯誤。 打開開發者控制台。 如今，Evergreen瀏覽器（Chrome，Firefox等...）擁有不錯的瀏覽器。 您應該知道的技巧是如何評估代碼，以便可以查看訪問數據的方式是否做錯了。 因此，請查找如何在瀏覽器中針對您的平台打開開發者控制台並將其鍵入到控制台中：
1+1
應該評估為：2.下一個類型：document如果單擊，您會看到可以稍微瀏覽一下dom。 接下來，使用上面的更改加載您的smartForm應用程序，然后鍵入：
document.getElementById('smartForm')
您應該看到您的元素。 這是正確查詢dom中對象的方法。 您會注意到，如果鍵入document.smartForm則不起作用。 您應該得到null，這應該告訴您應該有一種從文檔中獲取元素的方法。 提示，它是getElementById。 因此，如果在所有輸入中都輸入id，則可以列出可以查詢的所有文檔對象：
var cityElement = document.getElementById('city');
var stateElement = document.getElementById('state');
var zipElement = document.getElementById('zip');
var emailElement = document.getElementById('email');
接下來，您可以開始查詢值，例如：
cityElement.value.length != 2
清理后的版本如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Smart form</title>
</head>
<body>
<form id='smartForm' action='smartform.html'>
<b>City</b>
<input type="text" id="city" size="18">
<b>State</b>
<input type="text" id="state" size="4">
<b>Zip Code</b>
<input type="text" id="zip" size="5">
<b>Email</b>
<input type="text" id="email" size="18">
<input type="submit" value="done">
</form>
<script type="text/javascript">
var validateForm = function(evt) {
var error = false;
var cityElement = document.getElementById('city');
var stateElement = document.getElementById('state');
var zipElement = document.getElementById('zip');
var emailElement = document.getElementById('email');
if (cityElement.value.length != 2 ||
!(state.charCodeAt(0) >= 65 && state.charCodeAt(0) <= 91)) {
error = true;
alert('oops');
cityElement.focus();
}
// etc..
if (error) {
evt.preventDefault();
}
};
var smartForm = document.getElementById('smartForm');
smartForm.addEventListener('submit', validateForm);
</script>
</body>
</html>
好吧，我注意到了另外兩件事。 charCodeAt僅適用於字符串。 “ hi” .chatCodeAt不是element.charCodeAt。 另外，您還有這個隨機變量at_sign。 您可以節省大量時間，並且可以通過閱讀以下內容來學習如何診斷問題所在： https : //developer.chrome.com/devtools/docs/console學習如何診斷問題所在是最好的選擇嘗試掌握JavaScript時可以學習的技巧。 我不能太強調這一點，學習如何調試，您將學習如何更快地編程數量級。 相信我，讓調試教程成為您的最佳選擇！
您的代碼的完整工作示例： http : //codepen.io/JAStanton/pen/tjFHn?editors=101
稍微冗長一些的版本： http : //codepen.io/JAStanton/pen/iBJAk? editors= 101
解決方案3
0 2014-10-18 05:06:51
onSubmit的形式，而不是輸入，不帶javascript：已解決= p
<form onsubmit="return check_form();" ...
您的代碼中有幾處不幸事故，也可能會導致錯誤並阻止該錯誤發生
另外，請檢查是否有錯誤（例如腳本中的HTML注釋），如果javascript中發生了錯誤並且未進行處理，則該上下文中的所有javascript都將停止工作。 您可以使用任何瀏覽器調試器進行檢查（通常F12會顯示一個窗口，並在發生錯誤時顯示錯誤）
Javascript表單驗證 - 如何在單個表中顯示驗證錯誤而不是使用警報
[英]Javascript form validating - how do you show validation errors in a single table rather than using alerts
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.