表单验证，参数传递和页面重定向问题

Question

所以我正在使用 PHP 和 jQuery 创建这个表单验证器。 PHP 代码将检查表单，然后返回一个包含错误字段的数组。示例：{"email":1,"password":1}

但现在我担心是否没有发现错误。这里的问题是我在代码末尾包含了“return false”以防止页面重定向。我读到这是不好的代码实践，但没有找到另一种按预期工作的方式。

第二个问题是如何将 o-array 传递给 $('input').each 函数。现在它会说所有表格都是有效的，因为没有通过。如果我使用 $.post 而不是 $.ajax 这个范围问题由于某种原因不会出现。

jQuery:

$(function() {

    $('#register').submit(function() {
        var url = $(this).attr('action');
        var data = $(this).serialize();

        $.ajax({
            type: 'GET',
            url: url,
            data: data,
            success: function(o) {
                console.log(o);
                $('input').each(function() {
                    var msgId = o[$(this).attr('name')];
                    console.log(o[$(this).attr('name')]);

                    if (msgId > 0) {
                        $('#listError').css('visibility', 'visible');
                        $('#listError').append('<li>' + $(this).nextAll('span.msg').eq(msgId - 1).text() + '</li>');
                        $(this).addClass('invalid');
                    } else if (msgId != 0) {
                        $(this).addClass('valid');
                    }
                    $('#listError').append('</ul>');
                })
            }
        }, 'json');

        return false;
    });

});

Answer 1

拳头，为什么你真的不想提交表单？！改为使用按钮并从其单击处理程序发出 AJAX 请求。

$('#registerButton').click(function() {
    var form = $('#register')

    var data = form.serialize();

    $.ajax(...);
});

“第二个问题是如何将o-array传入$('input').each”

这里有什么问题？如果您在成功回调中有 each()，则可以在 each() 中使用传递给回调的 data 参数（或在您的情况下为 o）。

Answer 2

试试这个

$(function() {

    $('#submit_button_id').click(function() {
        var url = $(this).attr('action');
        var data = $(this).serialize();
        var ret = true;
        $.ajax({
            type: 'GET',
            url: url,
            async: false,
            data: data,
            success: function(o) {
                console.log(o);
                $('input').each(function() {
                    var msgId = o[$(this).attr('name')];
                    console.log(o[$(this).attr('name')]);

                    if (msgId > 0) 
                        ret = false;
                        $('#listError').css('visibility', 'visible');
                        $('#listError').append('<li>' + $(this).nextAll('span.msg').eq(msgId - 1).text() + '</li>');
                        $(this).addClass('invalid');
                    } else if (msgId != 0) {
                        $(this).addClass('valid');
                    }
                    $('#listError').append('</ul>');
                })
            }
        }, 'json');

        if(ret==true){
            $('#register').submit();
        }
    });

});