javascript - 带有气球弹出窗口的jsp表单验证

Question

我创建了以下表单，并希望在单击“注册”按钮后验证每个文本框。

我是 javascript 的新手，不知道它是如何工作的。还需要在文本框附近显示错误消息作为气球弹出窗口。

请建议 javascript 有用的技巧。

即使我填写了下面提到的任何一个文本框，下面的 javascript 仍在数据库中提交值。但实际情况应该是依次扫描每个文本框并显示错误消息。

function validateform()
{  

    var fn=document.getElementsByName("fname")[0].value;

    if(fn==null || fn==""){
        document.getElementById("bubble1").style.visibility="visible";
        return false;
    }
    else{
        document.getElementById("bubble1").style.visibility="hidden";
        return true;
    }

    var ln=document.getElementsByName("lname")[0].value;

    if(ln==null || ln==""){
        document.getElementById("bubble2").style.visibility="visible";
        return false;
    }
    else{
        document.getElementById("bubble2").style.visibility="hidden";
        return true;
    }
}

请指出哪里出了问题!

Answer 1

有很多方法可以实现您的目标，其中大部分是通过 js 事件处理程序完成的。 在这种情况下，您可以使用不同的事件“类型”，具体取决于您想要显示错误的时间，我建议在您的情况下使用表单按钮上的 on submit ，但您也可以检查 on change 每次输入，以便立即向用户显示错误。

最简单的方法，使用纯 javascript，可能是这样的:

   <form action="youraction" method="post" onsubmit="checkFields();">
   ....
   </form>

在您的 js 代码中，您将需要这样的东西:

   function checkFields(){
    var email = document.getElementById("email").value;
    var name = document.getElementById("name").value;
    var surname = document.getElementById("surname ").value;
    ...

    //validate your text fields, using regular expressions maybe
    if (!checkMail(email)){
      //attach a div to the body(absolute positioning) with the error
      return false; //this is important, it prevents the window from refreshing, aborting the submit
     }
     .....
     return true //everything is good, you can submit
  }

还有很多其他方法，例如使用 jQuery，但这可能工作得很好。