Javascript 表单验证不工作（无控制台错误）并通过多个函数传递参数

我有一个表单要验证（下面的代码片段）

正则表达式只是用来测试字段。

试试这个

验证函数

var validate = function(field,regEx,e){
    if((regEx).test($(field).val())){
        $(field).parents(fieldWrap).addClass(error).find(errorMsg).addClass(hide);
        formValid = true;
        return false; // if error comes then no submit
    }
    else{
        $alert.addClass(show);
        $(field).parents(fieldWrap).removeClass(error).find(errorMsg).addClass(show);
        return true; // return true if valid form
    }

};
$(form).on('submit',function(e){
    e.preventDefault();
    f=validate(fName  ,/^[a-zA-Z]{3}/,e);
    l=validate(lName  ,/^[a-zA-Z]{3}/,e);
    en=validate(cNumber,/^[a-zA-Z]{3}/,e);
    em=validate(email  ,/^[a-zA-Z]{3}/,e);
    ln=validate(lNumber,/^[a-zA-Z]{3}/,e);
    pc=validate(pCode  ,/^[a-zA-Z]{3}/,e);
    if(f && l && en && em && ln && pc) // everything is valid then return true
         return true;
    else // false otherwise
         return false;
});

---

我已经这样修改了你的函数，几分钟后我将写一点解释

(function () {
    var form = '.contact-form',
        alert = $('.alert'),
        fieldWrap = '.control-group',
        error = 'error',
        errorMsg = 'error-message',
        show = 'show',
        hide = 'hide';

    function validate(field, regEx, e) {
        var element = $(field);
        if (regEx.test(element.val())) {
            element.parents(fieldWrap).addClass(error).find(errorMsg).addClass(hide);
            return true;
        }
        alert.addClass(show);
        element.parents(fieldWrap).removeClass(error).find(errorMsg).addClass(show);
        return false;
    };

    function formIsValid() {
        return validate('#first-name', /^[a-zA-Z]{3}/, e) && validate('#last-name', /^[a-zA-Z]{3}/, e) && validate('#contact-number', /^[a-zA-Z]{3}/, e) && validate('#email', /^[a-zA-Z]{3}/, e) && validate('#landline-number', /^[a-zA-Z]{3}/, e) && validate('#postcode', /^[a-zA-Z]{3}/, e);
    }

    $(document).on('submit', form, function (e) {
        if (!formIsValid()) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
        console.log("form is valid, submitted.");
        return true;
    });
})();

我已经以最好的方式快速重构了你的代码。以下是对编辑的解释：

validate函数已经做了一些更改，现在如果字段有效，它将返回true，这样您就可以编写一个大函数来返回字段的所有有效性，即

formIsValid

function validate(field, regEx, e) {
    var element = $(field);
    if (regEx.test(element.val())) {
        element.parents(fieldWrap).addClass(error).find(errorMsg).addClass(hide);
        return true;
    }
    alert.addClass(show);
    element.parents(fieldWrap).removeClass(error).find(errorMsg).addClass(show);
    return false;
};

如您所见，submit函数经过重构，因此其中只有很少的逻辑。大型工作由检查所有表单的

formIsValid

完成

if (!formIsValid()) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}
console.log("form is valid, submitted.");
return true;

---

您没有将事件

e

传递给您的函数，那么在

验证

函数中，它将是

未定义的

$（表单）。在（'submit'，函数（e）{。您还应该使用

$（文档）。在（'click'，表单，函数（e）{…}）；

谢谢..不敢相信我错过了…实际函数仍然不起作用，尽管：-（您所做的与函数的用途完全相反。无论如何，您可以将函数的返回更改为

返回f&&l&&en&&em&&ln&&pc

。谢谢，我不得不稍微修改它，但使它能够工作，因此1+和acceptedGreat answer帮助我重构代码，并让我更好地理解如何工作

function validate(field, regEx, e) {
    var element = $(field);
    if (regEx.test(element.val())) {
        element.parents(fieldWrap).addClass(error).find(errorMsg).addClass(hide);
        return true;
    }
    alert.addClass(show);
    element.parents(fieldWrap).removeClass(error).find(errorMsg).addClass(show);
    return false;
};

if (!formIsValid()) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}
console.log("form is valid, submitted.");
return true;