Question

嗯..我想向用户展示他们需要填写的内容，如果他们没有填写他们的姓名，电子邮件或消息..例如，他们填写了他们的名字，但他们没有填写他们的电子邮件和消息所以将显示错误，他们应填写他们的电子邮件和消息。我的代码在这里显示所有错误，即使他们填写了他们的名字。

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;
}

Answer 1

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

它可以减轻你的许多验证问题...

Answer 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;}

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

javascript客户端验证循环

2 个答案: