简单表单验证无法正常工作

Question

因此，我试图实现一个简单的表单验证脚本以在Web服务器上运行，但我无法弄清为什么它不起作用。

通过运行代码的一些测试，似乎可以很好地完成注释部分的验证，但是电子邮件和主题部分没有得到正确验证，即使输入值在技术上应满足条件，也继续显示错误消息。

使用Javascript：

function validateForm(){
var validEmail, validSubject, validComment = true;
var validDocument = true;

var emailEntry =document.forms["contact_form"]["email"].value;
var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!pattern.test(emailEntry)) {
    //Not a valid email
    validEmail = false;
}
var subjectEntry = document.forms["contact_form"]["subject"].value;
if(subjectEntry.length < 6) {
    //Not a valid subject
    validSubject = false;
}
var commentsEntry = document.forms["contact_form"]["comments"].value;
if(commentsEntry.length < 50) {
    //Not a valid comment
    validComment = false;
}

var err1 = document.getElementById("email_error");
var err2 = document.getElementById("subject_error");
var err3 = document.getElementById("comment_error");

if(!validEmail) {
    //make error messages visible
    validDocument = false;
    err1.style.visibility = "visible";
} else {
    err1.style.visibility = "hidden";
}

if(!validSubject) {
    //make error messages visible
    validDocument = false;
    err2.style.visibility = "visible";
} else {
    err2.style.visibility = "hidden";   
}

if(!validComment) {
    //make error messages visible
    validDocument = false;
    err3.style.visibility = "visible";
} else {
    err3.style.visibility = "hidden";   
}

if(!validDocument) {
    var container = document.getElementById("errors");
    container.style.visibility = "visible";
    return false;   
} else {
    return true;
}}

HTML：

<div id="contact_fields">
            <form name="contact_form" onSubmit="return validateForm()" method="post" action="form_mailer.php">

                <font class="form_headers" face="Arial, Helvetica, sans-serif" size="4" color="#FFF">
                Your e-mail address :
                </font>

                <br><input type="text" name="email" id="email" value="" size="40" 
                style="height:10%;font-size:1.3vw;">
                <br><br><br><br>


                <font class="form_headers" face="Arial, Helvetica, sans-serif" size="4" color="#FFF">
                Subject :
                </font>

                <br><input type="text" name="subject" id="subject" value="" size="40"
                style="height:10%;font-size:1.3vw;">
                <br><br><br><br>


                <font class="form_headers" face="Arial, Helvetica, sans-serif" size="4" color="#FFF">
                Message :
                </font>

                <br><textarea name="comments" id="comments" rows="8" cols="40"
                style="font-size:1.3vw;"></textarea>
                <br>
                <font face="Arial, Helvetica, sans-serif" size="2" color="#FFF">
                 &bull; You must fill in all fields in order to submit.
                </font>
                <br>
                <input type="submit" name="Submit" value="submit" style="float:right;">
            </form>


        </div>



        <div id="errors" style="visibility:hidden">
            <p><font id="email_error" face="Arial, Helvetica, sans-serif" style="visibility:hidden" color="#FF0000">
                *Enter a valid e-mail</font></p>
            <p><font id="subject_error" face="Arial, Helvetica, sans-serif" style="visibility:hidden" color="#FF0000">*Subject must be at least 6 characters</font></p>
            <p><font id="comment_error" face="Arial, Helvetica, sans-serif" style="visibility:hidden" color="#FF0000">*Message must be at least 50 characters</font></p>
        </div>

编辑1：原谅html中真正令人讨厌的break标记，这有点仓促。

编辑2：将电子邮件验证更改为RegEx，但无济于事。

Answer 1

提示

• 职责分离将使调试更加容易。 每个功能都应该做一件事并且做好。
• 将数组用于结构相似的数据
• 如果在代码中看到模式，则使用循环

验证者

• 对于您的用例，您想验证各种字段，但是发现每个字段都很繁琐。 解决方案，做一个通用验证器

以下是通用验证器的代码

function validator(/*fn, args */) {
    var predicate = arguments[0];
    var args = Array.prototype.splice.call(arguments, 1);

    return function() {
        return (predicate.apply(null, arguments) == true);
    };
};

使用此功能，您可以创建更多特定的验证器，以后可以重复使用。 无论如何，它都不是完整的验证器，但这只是一个开始。

具体验证者

有了通用验证器后，就可以开始编码特定的验证器了。 在这种情况下，我们有两个验证器。 是电子邮件的值，并且是大于一定长度的字符串。 不用担心一封电子邮件，我只是从regex库中删除了它。 您可以使用适合您需求的一种。

var isEmail = validator(function(email) {
    return /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(email);
});

var isStringLengthGreaterThan = validator(function(value, length) {
    return (value.length > length);
});

验证字段

让我们创建一个通用的表单验证器。 因此，我们将从验证单个字段开始。 开始了。 此代码将接受参数，并假定前三个是formId，fieldId和验证器。 所有其他参数都被视为验证器的参数。

function isFieldValid(formId, domId, validatorFn) {
    var args = Array.prototype.splice.call(arguments, 3);
    args.unshift( document.forms[formId][domId].value );
    return validatorFn.apply(null, args);
};

放在一起

我在这里很懒惰（现在是午餐时间），但是您现在可以将所有内容放入集合中并遍历它们。 您可以创建一个名为doWhen的函数，并使用语法doWhen(!isFieldValid(...), printErrorMessage(...)) ，但我将留给您自己解决。

function validateForm(){
    var validFields = [    
        isFieldValid('contact_form', 'email', isEmail),
        isFieldValid('contact_form', 'subject', isStringLengthGreaterThan, 6),
        isFieldValid('contact_form', 'comments', isStringLengthGreaterThan, 50)
    ];

    var errorDomId = ["email_error", "subject_error", "comment_error"];

    validFields.forEach(function(isValid, index) {
        if ( isValid == false) {
            document
                .getElementById(errorDomId[index])
                .style
                .visibility = 'visible';
        };
    });

    if (validFields.indexOf(false) > -1) {
        var container = document.getElementById("errors");
        container.style.visibility = "visible";
    }

    return  (validFields.indexOf(false) == -1);
}

摘要

关键是将数据放入集合中，使您的函数保持简单，并在数据集合中循环以执行针对它们的操作和/或功能。 请注意，forEach方法在IE <9中不起作用。如果需要，可以将其替换为常规的for循环。 但是，出于可读性原因，我使用它。 祝您好运，编码愉快！

的jsfiddle