如果绕过/禁用客户端表单验证，如何仅使用服务器端验证答案

【问题标题】：How to only use server side validation if client form validation bypassed/disabled如果绕过/禁用客户端表单验证，如何仅使用服务器端验证
【发布时间】：2019-07-30 09:51:00
【问题描述】：

我正在使用 jQuery 验证 https://jqueryvalidation.org/documentation/2/

我使用 jQuery/ajax 进行服务器端验证作为备份。问题是服务器端首先验证。它只是作为备份，以防客户端验证被绕过等。除非需要，否则我怎样才能让它不工作？

<form id="supportForm">

$("#supportForm").validate({
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            },
            mobile: {
                required: true,
                digits: true,
                minlength: 9
            },
            company: "required",
            'checkboxes[]': {required: true}   
        },
         messages: {
            first_name: "First name required",
            last_name: "Last name required",
            email: "Inalid email address",
            mobile: "Please enter only digits",
            company: "Company required",
            'checkboxes[]': "Select at least one service"
        }
});

    $('#consult').on('click', function(e) {
        e.preventDefault();
        var form = $('#supportForm').serialize();
        $.ajax({
            url: 'validate.php',
            type: 'POST',
            dataType: 'json',
            data: form,
            beforeSend: function() {
                $('.error-message').empty().hide();
                $('consult').prop('disabled', true);
                $('consult').val('Submitting...');

            }
        })
        .done(function (data) {
            if(!data.success) {
                $('.error-message').append(data.message).fadeIn();
                $('consult').prop('disabled', false);
                $('consult').val('Submit');


            } else {
                alert('success, process form');
            }
        })
         .fail(function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
            console.warn(jqXHR.responseText);
        });
    });

【问题讨论】：

你应该看看submitHandler："Replaces the default submit. The right place to submit a form via Ajax after it is validated."

标签： jquery jquery-validate

【解决方案1】：

问题是服务器端验证首先触发。

这里的问题是您在提交表单之前没有对其进行验证。

jquery 验证钩子到表单提交，但您自己手动序列化表单（因此绕过浏览器提交）。

您需要在 $.ajax 之前调用 jquery 验证 form.valid()。

$('#consult').on('click', function(e) {
    e.preventDefault();

    if (!$('#supportForm').valid())
        return;

    var form = $('#supportForm').serialize();
    $.ajax({ ...

【讨论】：

谢谢！如何在不操作代码的情况下测试服务器端验证是否仍然有效？
不操作代码？不明白你的意思。你可以删除.valid() 调用，你可以用return true; 覆盖.valid() 调用——但这些肯定是“操纵”的。还有其他方法可以绕过 UI 验证，这正是您进行服务器端验证的原因，但我建议所有这些方法都在“操纵”代码或 HTML。
Or you could have just used the submitHandler callback that was put into the plugin for this exact purpose. - "Replaces the default submit. The right place to submit a form via Ajax after it is validated."
@Sparky 您应该添加自己的答案，这看起来是一个有效的选项。不知道为什么你把这一切都做成了一个可怕的长链接。

【解决方案2】：

您不应该为您的 Ajax 使用单独的 click 处理程序。该插件包含一个名为the submitHandler 的选项，并且该点击已被插件自动捕获。

替换默认提交。通过 Ajax 提交表单的正确位置验证后。

$("#supportForm").validate({
    rules: {
        ....   
    },
    messages: {
        ....
    },
    submitHandler: function(form) {
        $.ajax({
            url: 'validate.php',
            type: 'POST',
            dataType: 'json',
            data: $('#supportForm').serialize(),
            ....
        }
        return false;
    }
});

请注意，函数的参数称为form，因此请重命名参数或重命名变量。也不需要使用.preventDefault()；再次，因为插件已经为你处理好了。

【讨论】：