Javascript ajax文件上传到python的表单验证

我还是AJAX新手，在使用cgi-bin和IFrame将文件上传到服务器端之前，在表单验证方面有点困难

因此，我的代码如下：

HTML:

网络故障检测
产品详情
产品名称*：


月台*：
文件上传
上传主机文件：


上载测试文件：

JS:

$.fn.ajaxForm=函数（选项）{
选项=$.extend（{}{
onSubmit:function（）{}，
onResponse:函数（数据）{}
}，选项）；
变量iframeName='ajaxForm'，$iframe=$（'[name='+iframeName+']'）；
如果（！$iframe.length）{
$iframe=$（''）.appendTo（'body'）；
}
返回$（this）.each（函数（）{
var$form=$（此）；
$form
.prop（'target'，iframeName）
.prop（'enctype'，'multipart/form data'）
.prop（'编码'，'多部分/表单数据'）
.提交（职能（e）{
options.onSubmit.apply（$form[0]）；
$iframe.one（'load'，function（）{
var iframeText=$iframe.contents（）.find（'body'）.text（）；
options.onResponse.apply（$form[0]，[iframeText]）；
});
});
});
};
$（'#input'）.ajaxForm({
onResponse：函数（数据）{
警报（数据）；
//console.log（“数据为”+数据）；
//$（'#output'）.html（数据）；
}
});

这段代码运行良好，我可以上传文件和文本框字段。但是我想在提交之前对表单中的空字段执行验证，所以我尝试使用JQuery验证插件，但是如果我这样做，我的表单就不会通过AJAX提交。有人能告诉我如何在这里执行表单验证吗

以下javascript代码不通过AJAX提交表单：

<script>
$.fn.ajaxForm = function(options) {
      $('#upload').validate({
                               rules: {
                                        product: {
                                            required: true,
                                        },
                                        platform: {
                                            required: true,
                                        },
                                    hostupload:{
                                      required: true,
                                    },
                                    testupload:{
                                      required: true,
                                    },
                                    },

                                        messages: {
                                    product: {
                                          required: '***Product Name Required***'
                                      },
                                    platform: {
                                          required: '***Platform Required***'
                                      },
                                      hostupload:{
                                      required: '***Hostfile Required***'
                                    },
                                    testupload:{
                                      required: '***Testfile Required***'
                                    },
                                  },

    options = $.extend({}, {
        onSubmit:function() {},
        onResponse:function(data) {}
    }, options);
    var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
    if (!$iframe.length) {
        $iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
    }
    return $(this).each(function() {
        var $form = $(this);
        $form
            .prop('target', iframeName)
            .prop('enctype', 'multipart/form-data')
            .prop('encoding', 'multipart/form-data')
            .submit(function(e) {
                options.onSubmit.apply($form[0]);
                $iframe.one('load', function() {
                    var iframeText = $iframe.contents().find('body').text();
                    options.onResponse.apply($form[0], [iframeText]);
                });
            });
    });

     }); 
};
$('#input').ajaxForm({
    onResponse:function(data) {

        alert(data);
        //console.log("the data is"+data);
        //$('#output').html(data);
    }
});

$.fn.ajaxForm=函数（选项）{
$（'#上载'）。验证({
规则：{
产品：{
要求：正确，
},
站台：{
要求：正确，
},
主机上载：{
要求：正确，
},
测试上传：{
要求：正确，
},
},
信息：{
产品：{
必填项：“***需要产品名称***”
},
站台：{
必需：“***需要平台***”
},
主机上载：{
必需：'***必需的主机文件***'
},
测试上传：{
必需：'***需要测试文件***'
},
},
选项=$.extend（{}{
onSubmit:function（）{}，
onResponse:函数（数据）{}
}，选项）；
变量iframeName='ajaxForm'，$iframe=$（'[name='+iframeName+']'）；
如果（！$iframe.length）{
$iframe=$（''）.appendTo（'body'）；
}
返回$（this）.each（函数（）{
var$form=$（此）；
$form
.prop（'target'，iframeName）
.prop（'enctype'，'multipart/form data'）
.prop（'编码'，'多部分/表单数据'）
.提交（职能（e）{
options.onSubmit.apply（$form[0]）；
$iframe.one（'load'，function（）{
var iframeText=$iframe.contents（）.find（'body'）.text（）；
options.onResponse.apply（$form[0]，[iframeText]）；
});
});
});
}); 
};
$（'#input'）.ajaxForm({
onResponse：函数（数据）{
警报（数据）；
//console.log（“数据为”+数据）；
//$（'#output'）.html（数据）；
}
});

---

为什么不使用普通HTML必需标记？只要做一些类似于

的事情，HTML就会起作用。不需要JQuery。嗨，谢谢。这很简单：），但我还必须做一些其他验证。但我想我会坚持基本原则。谢谢：）

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
   <script>
       $.fn.ajaxForm = function(options) {
    options = $.extend({}, {
        onSubmit:function() {},
        onResponse:function(data) {}
    }, options);
    var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
    if (!$iframe.length) {
        $iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
    }
    return $(this).each(function() {
        var $form = $(this);
        $form
            .prop('target', iframeName)
            .prop('enctype', 'multipart/form-data')
            .prop('encoding', 'multipart/form-data')
            .submit(function(e) {
                options.onSubmit.apply($form[0]);
                $iframe.one('load', function() {
                    var iframeText = $iframe.contents().find('body').text();
                    options.onResponse.apply($form[0], [iframeText]);
                });
            });
    });
};
$('#input').ajaxForm({
    onResponse:function(data) {

        alert(data);
        //console.log("the data is"+data);
        //$('#output').html(data);
    }
});

<script>
$.fn.ajaxForm = function(options) {
      $('#upload').validate({
                               rules: {
                                        product: {
                                            required: true,
                                        },
                                        platform: {
                                            required: true,
                                        },
                                    hostupload:{
                                      required: true,
                                    },
                                    testupload:{
                                      required: true,
                                    },
                                    },

                                        messages: {
                                    product: {
                                          required: '***Product Name Required***'
                                      },
                                    platform: {
                                          required: '***Platform Required***'
                                      },
                                      hostupload:{
                                      required: '***Hostfile Required***'
                                    },
                                    testupload:{
                                      required: '***Testfile Required***'
                                    },
                                  },

    options = $.extend({}, {
        onSubmit:function() {},
        onResponse:function(data) {}
    }, options);
    var iframeName = 'ajaxForm', $iframe = $('[name=' + iframeName + ']');
    if (!$iframe.length) {
        $iframe = $('<iframe name=' + iframeName + ' style="display:none">').appendTo('body');
    }
    return $(this).each(function() {
        var $form = $(this);
        $form
            .prop('target', iframeName)
            .prop('enctype', 'multipart/form-data')
            .prop('encoding', 'multipart/form-data')
            .submit(function(e) {
                options.onSubmit.apply($form[0]);
                $iframe.one('load', function() {
                    var iframeText = $iframe.contents().find('body').text();
                    options.onResponse.apply($form[0], [iframeText]);
                });
            });
    });

     }); 
};
$('#input').ajaxForm({
    onResponse:function(data) {

        alert(data);
        //console.log("the data is"+data);
        //$('#output').html(data);
    }
});