javascript - 使用 ajax/jquery 验证并提交包含数据和文件的表单

Question

我有一个包含数据和文件输入字段的表单，我想通过一个脚本使用 jquery 和 ajax 提交并验证此表单。

下面是我的表格:

<form id="datas" method="post" enctype="multipart/form-data">
    <input type="text" name="firstName" value="" />
    <input name="pic" type="file" />
    <button>Submit</button>
</form>

现在我有这段代码来验证数据

$('#datas').validate({
    rules: {
        firstName:{
            required: true,
            minlength: 2,
            maxlength: 100
        }   

    },
    messages: {
        firstName: {
            required: "Please Enter first name",
            minlength: jQuery.format("Enter at least {0} characters"),
            maxlength: jQuery.format("Enter atmost {0} characters"),
        }
    }
});

然后我有一个可以提交表单的单独代码

$("#datas").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: sucess.php,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

问题:

请问如何组合这两个脚本来验证文件和数据字段并提交到成功页面。

Answer 1

您可以为文件字段设置必需的属性，例如:

   rules: {
        ...
        pic:{
            required: true
        },