Javascript表單驗證

Question

我想驗證HTML表單上的輸入。我正在嘗試使用一個腳本來驗證具有幾個相似元素的各種表單。總的來說，大約有15個不同的領域，但我只是把3個。下面的工作表單上的所有元素，但沒有任何形式，沒有一個特定的領域失敗。

if (form.name.value == ""){ // Check if blank 
    alert("\nEnter a name."); 
    form.name.focus(); 
    return false; // Stop the form processing. 
    } 

else if (!/^\w{10}$/.test(form.phone.value)) { // Check for phone 
    form.name.style.border="" 
    alert("\nEnter a valid phone number!"); 
    form.phone.focus(); 
    return false; // Stop the form processing. 
    } 

else{ 
return true; // Submit! 

因爲這隻適用於所有都存在我想要做的只是驗證，如果它存在。我試圖在驗證它之前檢查元素的嵌套驗證下，如果元素不存在，它應該繼續下一步。

if (document.forms[0].name){ //does field exist? 
    if (form.name.value === ""){ 
     alert("\nEnter a name."); 
     form.name.focus(); 
     return false; // Stop the form processing. 
     } 
    else{ 
     return true; //field ok move on. 
     } 
    } 

else if (document.forms[0].phone){ 
    if (!/^\w{10}$/.test(form.phone.value)) { user 
     form.name.style.border="" 
     alert("\nEnter a valid phone number!"); 
     form.phone.focus(); 
     return false; // Stop the form processing. 
     } 
    else{ 
     return true; //field ok move on. 
     } 
    } 
else{ 
     return true; // Submit! 
} 

任何幫助幫助，將不勝感激！

Answer 1

目前你正在檢查（document.forms [0] .name）是否可用，如果這是死的，它檢查是否（document.forms [0] .phone）是真的，然後..... 。然後如果沒有一個是真的，它會訴諸於'else'並且返回是真實的。 if else的使用意味着如果這部分失敗了，你只會煩惱任何東西。

你可以試試。

if (document.forms[0].name) { 
    if (!/^\w{10}$/.test(form.phone.value)) { user 
     form.name.style.border="" 
     alert("\nEnter a valid phone number!"); 
     form.phone.focus(); 
     return false; // Stop the form processing. 
    } 
} 
if (document.forms[0].blah) { 
    do stuff... 
    if fail 
     return false; 
} 
return true; 

由於功能將會反正返回爲真，則不需要聲明返回true其他地方（這也將停止這一進程，因爲它有returned和停止）。如果事情出錯了，就停止這個過程的唯一原因..因此return false;

Answer 2

如果你只是需要驗證一個表單，你現在不需要編寫javascript。您可以使用html5 forms。即使您必須支持沒有此功能的瀏覽器，您也可以將webshims lib放在您的頁面上啓用它。