javascript客户端验证循环

javascript client side validation loop

本文关键字：循环 验证 客户端 javascript      更新时间：2023-09-26

嗯。。我想向用户展示，如果他们没有填写自己的姓名、电子邮件或消息，他们需要填写什么。。例如，他们填写了自己的姓名，但没有填写电子邮件和消息，因此会显示一个错误，表明他们应该填写电子邮件和信息。我在这里的代码显示所有错误，即使他们填写了自己的名字。

function validate() {
    var myName = document.getElementById("inputName");
    var myEmail = document.getElementById("inputEmail");
    var filter = /^[_a-z0-9]+('.[_a-z0-9-]+)*@[a-z0-9-]+('.[a-z0-9-]+)*('.[a-z]{2,3})$/i;
    var myMessage = document.getElementById("inputMessage");
    var isValid = true;
    if(myName.value == "") {
        var myNameError = document.getElementById("inputNameError");
        myNameError.innerHTML = "Please provide your name.";
        isValid = false;
    }
    if (!filter.test(myEmail.value)) {
        var myEmailError = document.getElementById("inputEmailError");
        myEmailError.innerHTML="Please provide your email.";
        isValid = false;
    }       
    if(myMessage.value == "") {
        var myMessageError = document.getElementById("inputMessageError");
        myMessageError.innerHTML = "Please provide your message.";
        isValid = false;
    }
    return isValid;
}

您可以尝试一下jQuery验证：http://jqueryvalidation.org/documentation/

它将减轻您的许多验证难题。。。

如果我对你的问题的理解是正确的。以下是您的场景：

  1. 第一次不给任何字段赋值时，会显示所有错误
  2. 第二个输入名称字段，并期望名称错误确实会消失，但它仍然显示出来

原因是每个输入字段有1个错误划分（总共3个），并且当输入存在时，它们不会被隐藏。你可以修改你的代码如下：

function validate() {
    var myName = document.getElementById("inputName");
    var myEmail = document.getElementById("inputEmail");
    var filter = /^[_a-z0-9]+('.[_a-z0-9-]+)*@[a-z0-9-]+('.[a-z0-9-]+)*('.[a-z]{2,3})$/i;
    var myMessage = document.getElementById("inputMessage");
    var isValid = true;
    var myNameError = document.getElementById("inputNameError");
    var myEmailError = document.getElementById("inputEmailError");
    var myMessageError = document.getElementById("inputMessageError");
    //Initially hide all previous error messages.
    myNameError.className="hidden";
    myEmailError.className="hidden";
    myMessageError.className="hidden";
    if(myName.value == "") {
        myNameError.className="visible";//make error message div visible only on error.
        myNameError.innerHTML = "Please provide your name.";
        isValid = false;
    }
    if (!filter.test(myEmail.value)) {
        myEmailError.className="visible";//make error message div visible only on error.
        myEmailError.innerHTML="Please provide your email.";
        isValid = false;
    }       
    if(myMessage.value == "") {
        myMessageError.className="visible";//make error message div visible only on error.
        myMessageError.innerHTML = "Please provide your message.";
        isValid = false;
    }
    return isValid;
}

CSS

.hidden {display: none;}
.visible {display: block;}

编辑根据评论添加fidd链接。

相关文章：