Question

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

<form action="" class="form-horizontal contact-form">

<h2>Contact details</h2>
<h3>Please ensure that these are accurate so that we can contact you if there is a problem processing your request</h3>

<fieldset>
    <div class="control-group">
        <label class="control-label" for="first-name">First name<span class="asterisk">*</span>:</label>
        <div class="controls">
            <input type="text" id="first-name" name="first-name" placeholder="Please enter your first name" />
        </div>
    </div>....

我无法使我的验证功能正常工作，我也很好奇通过函数将“e”作为参数传递（如果有意义的话）......

一直绞尽脑汁，希望有人可以发现我出错的地方

JS下面是：

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

var validate = function(field,regEx,e){

    if((regEx).test($(field).val())){
        $(field).parents(fieldWrap).addClass(error).find(errorMsg).addClass(hide);
        formValid = true;
    }
    else{
        $alert.addClass(show);
        $(field).parents(fieldWrap).removeClass(error).find(errorMsg).addClass(show);
        e.preventDefault();
        e.stopPropagation();
    }

};

$(form).on('submit',function(e){
    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);
});
})();

regEx只是为了测试字段。

Answer 1

试试这个，

验证功能

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

Answer 2

我已经用这种方式修改了你的功能，我将在几分钟内写下一些解释。

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

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

验证函数已经改变了一点，现在如果字段有效则返回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;
};

正如您所看到的，提交函数被重构，因此只有很少的逻辑。最重要的工作是由formIsValid完成的，它会检查所有表格。

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

表单验证不起作用（没有控制台错误）并通过多个函数传递参数

2 个答案: