我的JavaScript表单验证不工作

My JavaScript Form Validation is Not Working

本文关键字：工作 验证 表单 JavaScript 我的      更新时间：2023-09-26

我试图验证我的表单中的三个字段。表单是一个简单的联系人表单和JavaScript。下面是验证的javascript代码:

 <script type="text/javascript"><!--
function validateForm() {
 with (document.contact-form) {
 var alertMsg = "The following REQUIRED fields'nhave been left empty:'n";
 if (name.value == "") alertMsg += "'nNAME IS REQUIRED";
 if (email.value == "") alertMsg += "'nEMAIL IS REQUIRED";
 if (phone.value == "") alertMsg += "'nPHONE IS REQUIRED";
 if (alertMsg != "The following REQUIRED fields'nhave been left empty:'n") {
 alert(alertMsg);
 return false;
 } else {
return true;
} } }
 // --></script>

和我的HTML代码的形式是:

  <form id="contact-form" name="contact-form" action="form.php" method="post" 
    onsubmit="return validateForm()">
<input id="name" type="name" name="name" value="NAME"  
     onfocus="if (this.value=='NAME') this.value='';" onblur="if (this.value=='') 
     this.value='NAME';"/><br />
<input id="email" type="email" name="email" value="EMAIL" onfocus="if     
    (this.value=='EMAIL') this.value='';" onblur="if (this.value=='') 
    this.value='EMAIL';" /><br />
<input id="phone" type="text" name="phone" value="PHONE" class="phone" onfocus="if 
    (this.value=='PHONE') this.value='';" onblur="if (this.value=='')   
     this.value='PHONE';" /><br />
<input type="text" name="event-location" value="EVENT LOCATION" onfocus="if  
    (this.value=='EVENT LOCATION') this.value='';" onblur="if (this.value=='')  
    this.value='EVENT LOCATION';" /><br />
<input type="text" name="event-date" value="EVENT DATE" onfocus="if  
    (this.value=='EVENT DATE') this.value='';" onblur="if (this.value=='')  
     this.value='EVENT DATE';" /><br />
<input type="text" name="event-time" value="EVENT TIME" onfocus="if  
    (this.value=='EVENT TIME') this.value='';" onblur="if (this.value=='')  
    this.value='EVENT TIME';" /><br />
<input type="text" name="message" value="MESSAGE" class="message" onfocus="if  
    (this.value=='MESSAGE') this.value='';" onblur="if (this.value=='')  
     this.value='MESSAGE';" /><br />
<input type="submit" name="send" value="SEND" />
</form>

如有任何帮助，我将不胜感激。

谢谢

试试这个

<script type="text/javascript"><!--
 function validateForm() {
  var mytable = document.getElementById('contact-form');
  with (mytable) {
    var alertMsg = "The following REQUIRED fields'nhave been left empty:'n";
    if (name.value == "" || name.value == "NAME") alertMsg += "'nNAME IS REQUIRED";
    if (email.value == "" || email.value == "EMAIL") alertMsg += "'nEMAIL IS REQUIRED";
    if (phone.value == "" || phone.value == "PHONE") alertMsg += "'nPHONE IS REQUIRED";
    if (alertMsg != "The following REQUIRED fields'nhave been left empty:'n") {
      alert(alertMsg);
      return false;
    } else {
      return true;
    }  } }
// --></script>

或者更直接一点

<script type="text/javascript"><!--
 function validateForm() {
  var mytable = document.getElementById('contact-form');
  var alertMsg = "The following REQUIRED fields'nhave been left empty:'n";
  if (document.getElementById('name').value == "") alertMsg += "'nNAME IS REQUIRED";
  if (document.getElementById('email').value == "") alertMsg += "'nEMAIL IS REQUIRED";
  if (document.getElementById('phone').value == "") alertMsg += "'nPHONE IS REQUIRED";
  if (alertMsg != "The following REQUIRED fields'nhave been left empty:'n") {
     alert(alertMsg);
     return false;
  } else {
     return true;
  } }
// --></script>
相关文章：