javascript - 如何在提交和键入时验证表单

Question

我的表单在 keyup 上验证，但是当我也尝试在提交时验证它时，我只是想不出该怎么做。

这是我的 HTML:

   <form action="#" method="post">                      
        <section class="col">   

            <section class="row">                   
                <label for="name">Name</label>
                <input type="text" name="name" value="" id="name" class="field validate-field valid-name" />                    
            </section>

            <section class="row">                   
                <label for="email">Email Address</label>
                <input type="text" name="email" value="" id="email" class="field validate-field valid-mail" />                  
            </section>

            <section class="row">                   
                <label for="phone">Phone Number</label>
                <input type="text" name="phone" value="" id="phone" class="field validate-field valid-phone" />                     
            </section>                  
        </section>

        <section class="col">               
            <label for="message">Message</label>
            <textarea class="field validate-field valid-text" name="message" id="message-field"></textarea>
            <input type="submit" value="Submit" class="submit-button" />
        </section>
   </form>

JS:

function validate( field ){
    var value = field.val();
    var to_label = field.parent().find('label');
    var error = false;
    var error_message = '';

    to_label.find('span').remove();

    if ( field.hasClass('validate-field') && value == '' ) {
        error = true;
        error_message = 'Empty Field';  
    } else if ( field.hasClass('valid-name') && valid_name(value) == false ) {
        error = true;
        error_message = 'Name must consist characters only';
    } else if ( field.hasClass('valid-mail') && valid_email(value) == false ) {
        error = true;
        error_message = 'Invalid Email';
    } else if ( field.hasClass('valid-phone') && valid_phone(value) == false ) {
        error = true;
        error_message = 'Your phone must be digits only';
    };

    if ( error == true ) {
        to_label.append('<span>'+ error_message +'</span>');
    }
};


$('.validate-field').live('keyup', function(){
    validate( $(this) );
});

function valid_name(value){
    var valid = /^([a-zA-Z_\.\-\+])+$/;
    return valid.test(value);
};

function valid_email(value){
    var valid = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return valid.test(value);
};

function valid_phone(value){
    var valid = /^[0-9-+]+$/;
    return valid.test(value);

};

我必须添加这样的内容:

$('form').live('submit', function(){

    if ( "...validated..." ) {  
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

提交函数中应该包含什么？

我试过:

$('form').live('submit', function(){

    var valid = validate( $('.field') )

    if ( valid  == true ) { 
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

但这会验证所有表单的所有验证(电子邮件、电话...)。我尝试在 validation() 函数中添加 if (error == false){ return: true }，然后在 submit function 中运行 validation() 并添加了 if ( validation() == true ){ .. to send php ..}。那也没用。我需要做什么？

Answer 1

我猜你可以通过以下方式验证整个表单:

function validateAll() {
    var valid = true;
    $('form').find('.validate-field').each(function (i, e) {
        if (!validate($(this))) {
           valid = false;
            return;
        }
    });
    return valid;
}

function validate( field ){
    var value = field.val();
    var to_label = field.parent().find('label');
    var error = false;
    var error_message = '';

    to_label.find('span').remove();

    if ( field.hasClass('validate-field') && value == '' ) {
        error = true;
        error_message = 'Empty Field';  
    } else if ( field.hasClass('valid-name') && valid_name(value) == false ) {
        error = true;
        error_message = 'Name must consist characters only';
    } else if ( field.hasClass('valid-mail') && valid_email(value) == false ) {
        error = true;
        error_message = 'Invalid Email';
    } else if ( field.hasClass('valid-phone') && valid_phone(value) == false ) {
        error = true;
        error_message = 'Your phone must be digits only';
    };

    if (error) {
        to_label.append('<span>'+ error_message +'</span>');
    }
    return !error;

};

$('form').live('submit', function(){

    if (validateAll()) {  
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

在我看来，这是需要最少重构量的选项。

让我向您解释函数 validateAll 的作用。它找到类为 validate-field 的所有字段，并将其作为参数传递给 validate 函数。由于我在 validate 中进行的重构，如果该字段无效，它会返回 false，因此当我们使用特定输入调用 validate 并且它无效时，我们只返回 false(表单无效)。

这是 JSfiddle 中的示例.

对于更高级的验证，我可以向您推荐验证插件，例如:http://docs.jquery.com/Plugins/Validation或 jqxValidator .