javascript表單驗證if語句

我正在構建註冊表單，並發現Safari瀏覽器不支持HTML5'Required'標記。所以我建立了這個Javascript腳本來確保用戶必須提交數據或表單不會提交。javascript表單驗證if語句

但是，如果您輸入用戶名和密碼，但沒有電子郵件地址，表單仍會提交。（如果您遺漏了用戶名和/或密碼，表單不會提交）。

所以這個問題似乎與腳本的電子郵件地址的一部分。如果電子郵件字段爲空，我不希望表單提交。

這裏是我的代碼：

<script> 
function ValidateLoginForm() 
{ 
    var username = document.form1.username; 
    var password = document.form1.password; 
    var email = document.form1.email; 



     if (username.value == "") 
    { 
     alert("Your username wasn't recognised."); 
     username.focus(); 
     return false; 
    } 

     if (password.value == "") 
    { 
     alert("Please enter a password."); 
     password.focus(); 
     return false; 
    } 
     if (email.value == "") 
    { 
     alert("Please enter your email address."); 
     mypassword.focus(); 
     return false; 
    } 
    else{ 
    return true; 
    } 
} 
</script>

這裏是我的表（表內）

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> 
<tr> 
<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();"> 
<td> 
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
<tr> 
<td colspan="3"><center><strong>Registration Form</strong></center></td> 
</tr> 
<tr> 
<td width="78">Username</td> 
<td width="6">:</td> 
<td width="294"><input name="username" type="text" id="username" required></td> 
</tr> 
<tr> 
<td>Password*</td> 
<td>:</td> 
<td><input name="password" type="text" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers." required></td> 
</tr> 
<tr> 
<tr> 
<td>Email</td> 
<td>:</td> 
<td><input name="email" type="text" id="email" required></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td><input type="submit" name="submit" value="Submit Registration Form"></td> 
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p> 
</tr> 
</table> 
</td> 
</form> 
</tr> 
</table>

謝謝

來源

2012-11-24 Bob Uni

它看起來像你的重點是不存在的項目mypassword ，這會導致腳本以錯誤終止，並且表單正常提交。

if (email.value == "") 
{ 
    alert("Please enter your email address."); 
    // Focus the email rather than mypassword (which doesn't exist) 
    email.focus(); 
    return false; 
} 
// All's well if you got this far, return true 
return true;

Here is the working code

它始終發展與瀏覽器的錯誤控制檯打開JavaScript是非常重要的。你會看到一個關於未定義對象的錯誤mypassword，它可能會指向你的代碼中的錯誤行。

來源

2012-11-24 14:09:20

感謝您的答覆邁克爾。我只是嘗試過，但它仍然提交一個空白的電子郵件字段。我無法弄清楚爲什麼。 –

@BobUni我完全不在。現在我想我看到上述問題的真正根源...... –

謝謝邁克爾。修正了它:-) 我沒有發現，並沒有意識到它會導致我的腳本終止並提交。每天學習新東西！謝謝 –

沒有HTML5標籤，使用通用類名，這將是

<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();"> 
<td> 
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
<tr> 
<td colspan="3"><center><strong>Registration Form</strong></center></td> 
</tr> 
<tr> 
<td width="78">Username</td> 
<td width="6">:</td> 
<td width="294"><input class="inputElement" type="text" name="username" id="username" ></td> 
</tr> 
<tr> 
<td>Password*</td> 
<td>:</td> 
<td><input class="inputElement" type="text" name="password" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers." ></td> 
</tr> 
<tr> 
<tr> 
<td>Email</td> 
<td>:</td> 
<td><input class="inputElement" type="text" name="email" id="email" ></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td><input type="submit" name="submit" value="Submit Registration Form"></td> 
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p> 
</tr> 
</table> 
</td> 
</form> 


<script type="text/javascript"> 

function ValidateLoginForm() 
{ 
    var inputElements = document.getElementsByClassName('inputElement');; 
    for(var i=0;i<inputElements.length;i++){ 
     if(!inputElements[i].value){ 
      alert(inputElements[i].name +' cannot be empty'); 
      return false; 
     } 
    } 
    return true; 
} 
</script>

來源

2012-11-24 14:26:10

javascript表單驗證if語句

回答

相關問題