在提交或阻止提交表单之前，如何使用jquery .defer或.done验证表单(使用非侵入性)

在jQuery中，.defer 和 .done 方法通常与异步操作（如AJAX请求）一起使用，而不是直接用于表单验证。不过，我们可以利用这些方法来处理表单验证完成后的逻辑。以下是一个使用jQuery进行非侵入式表单验证的示例，该示例在提交表单之前进行验证，并利用.done方法处理验证成功的情况。

基础概念

非侵入式验证：指的是在不修改表单HTML结构的情况下进行验证，通常通过添加事件监听器和处理函数来实现。

jQuery .defer 和 .done：

.defer 是创建一个延迟对象的方法，通常与 $.ajax 结合使用。
.done 是一个处理异步操作成功完成后的回调函数。

类型与应用场景

客户端验证：在用户提交表单前进行验证，提升用户体验。
远程验证：通过AJAX请求与服务器交互，验证用户名是否唯一等。

示例代码

以下是一个简单的非侵入式表单验证示例，使用了jQuery的.done方法来处理验证成功后的逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<form id="myForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
    $('#myForm').on('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 执行验证逻辑
        var isValid = validateForm();

        if (isValid) {
            // 如果验证通过，使用AJAX提交表单数据
            $.ajax({
                url: '/submit-form', // 替换为实际的提交地址
                method: 'POST',
                data: $(this).serialize(),
                dataType: 'json'
            }).done(function(response) {
                // 处理成功响应
                alert('Form submitted successfully!');
            }).fail(function(jqXHR, textStatus, errorThrown) {
                // 处理失败响应
                alert('Form submission failed: ' + textStatus);
            });
        } else {
            alert('Please fix the form errors before submitting.');
        }
    });

    function validateForm() {
        // 这里添加具体的验证逻辑
        // 返回true表示验证通过，false表示验证失败
        var username = $('input[name=username]').val();
        var password = $('input[name=password]').val();

        if (username && password) {
            return true;
        } else {
            return false;
        }
    }
});
</script>

</body>
</html>