提示

Question

所以我试图在我的网络服务器上运行一个简单的表单验证脚本，但我无法弄清楚它为何无法工作。

从运行一些代码测试看来，评论部分验证似乎没有问题，但电子邮件和主题部分没有得到正确验证，即使输入值在技术上满足条件，也会继续显示错误消息

使用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中真正令人讨厌的破解标签，它有点匆忙。

编辑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 library撕掉它。您可以使用符合您需求的那个。

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＆lt; 9.如果需要，可以使用常规for循环替换它。但是，出于可读性原因，我使用它。祝你好运，编码愉快！

jsFiddle

简单的表单验证不能正常工作

1 个答案:

提示

验证器

特定验证器

验证字段

全部放在一起

摘要