Question

我正在尝试在表单中进行一些验证，但这不符合标记。我需要隐藏名称的错误消息消息并仅显示电子邮件错误。但它没有发生。也许你会从代码中理解。

在这里。

function validateform(form){ 
 event.preventDefault();
 console.log(form);
 var i; 
 var fname = form.name.value;
 var email = form.email.value;
 var message = form.getElementsByClassName("error-message");
 var atpos = email.indexOf("@");
 var dotpos = email.lastIndexOf(".");
 if (fname==null || fname==""){      
   for (i = 0; i < message.length;i++)
   {
     form.getElementsByClassName("error-message")[i].innerHTML="Please Enter Name";
  return false;
  }  
}

 else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
 for (i = 0; i < message.length;i++)
 {
  form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again.";
  return false;
 } 
}

else if (fname!=null || fname!=""){
for (i = 0; i < message.length;i++)
 {
  form.getElementsByClassName("error-message")[i].style.display = "none";
  return false;
 }
}

HTML

    <form name="ccform" method="post" onsubmit="validateform(this)">
            <p class="customer-name">Name</p>
            <input type="text" class="input-name" name="name"></input>
            <p class="error-message"></p>
            <p class="customer-name">Email</p>
            <input type="text" class="input-name" name="email" placeholder="e.g. name@emailaddress.com"></input>
            <p class="error-email"></p>
            <button type="submit" class="submit-button">Submit</button>
    </form>

我想隐藏错误消息并在输入姓名时仅显示错误电子邮件，未输入电子邮件，我按下提交按钮。

P.S：请不要jQuery。

Answer 1

您试图在error_message条件下隐藏else if课程。代码不会解析所有if条件。在您的情况下，您希望显示电子邮件验证消息，因此它将进入第二个条件，并且不会进入第三个条件。请参阅if-else if-else声明here的用法。您只需尝试将第二个和第三个条件合并在一起，如下所示。

if (fname==null || fname==""){
    for (i = 0; i < message.length;i++)
    {
        form.getElementsByClassName("error-message")[i].innerHTML="Please Enter Name";
        form.getElementsByClassName("error-message")[i].style.display = "block";
        return false;
    }  
} else {
    form.getElementsByClassName("error-message")[i].style.display = "none";
}

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
    for (i = 0; i < message.length;i++)
    {
        form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again.";
        form.getElementsByClassName("error-email")[i].style.display = "block";
        return false;
    } 
} else {
    form.getElementsByClassName("error-email")[i].style.display = "none";
}

希望它有所帮助。

Answer 2

这对我有用。

function validateform(form){ 
var i; 
var fname = form.name.value;
var email = form.email.value;
var message = form.getElementsByClassName("error-message");
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf("."); 
if (fname==null || fname==""){      
for (i = 0; i < message.length;i++)
 {
  form.getElementsByClassName("error-message")[i].innerHTML="Please enter your name";
  form.getElementsByClassName("error-message")[i].style.display = "block";
  form.getElementsByClassName("error-email")[i].style.display = "none";
  return false;
 }  
}

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
for (i = 0; i < message.length;i++)
 {
  form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again.";
  form.getElementsByClassName("error-message")[i].style.display = "none";
  form.getElementsByClassName("error-email")[i].style.display = "block";  
  return false;
 } 
}

已执行部分验证

2 个答案: