0

我有一个要验证的表格（下面的片段）

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

正则表达式只是为了测试字段。

4

2 回答 2

0

尝试这个，

验证功能

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;
});
于 2013-06-13T13:23:36.407 回答
0

我已经这样修改了你的函数，我会在几分钟内写一点解释。

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

如您所见，提交函数被重构，因此其中只有很少的逻辑。大工作是通过formIsValid检查所有表格来完成的。

if (!formIsValid()) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}
console.log("form is valid, submitted.");
return true;
于 2013-06-13T13:31:52.253 回答