【问题标题】:validate form input type file type using jquery validate plugin使用 jquery validate 插件验证表单输入类型文件类型
【发布时间】:2012-06-04 15:02:30
【问题描述】:

以下代码: 脚本代码

<script type="text/javascript">
$(document).ready(function() {
    $("#formElem").validate({

        rules: {  

            dimage:{
                minlength:200    
            }  
        },
messages: {


             dimage:{
               required: 'Please select the image!'  
            } ,

        }       
    });

});
</script>

html代码

<form id="formElem" name="formElem" action="" method="post">

 <input type="file" name="dimage" id="dimage" />
</form>

我正在使用 jquery validate.js 文件进行客户端验证。当我使用上述代码创建文件时,它没有显示任何错误消息。

当用户未选择文件时,我应该如何提醒错误消息?

【问题讨论】:

    标签: jquery jquery-plugins jquery-validate validation


    【解决方案1】:

    如果您上传图像文件 Jquery Validation 插件有一个选项accept,您可以将其设置为一个值,该值将验证文件是否真的是图像,那么您的 jquery 代码将如下所示:

    $("#formElem").validate({
    
          rules: {  
    
                dimage:{
                        required: true,
                        accept:"jpg,png,jpeg,gif"
                    }  
            },
        messages: {
    
                dimage:{
                        required: "Select Image",
                        accept: "Only image type jpg/png/jpeg/gif is allowed"
                    }  
    
                 }      
            });
    

    更多信息请见Official Docs

    【讨论】:

    • 注意: 此方法用于仅查看文件名,特别是文件扩展名。该行为现在可用作 src/additional/extension.js 中的“扩展”方法。 See.
    【解决方案2】:

    试试这个。

    $(document).ready(function() {
        $("#formElem").validate({
            rules: {  
                dimage:{
                    required: true    
                }  
            },
            messages: {
                dimage:{
                   required: 'Please select the image!'  
                } ,
            }       
        });
    });
    

    【讨论】:

    • 如何验证具有最小和最大尺寸的类型(png 和 jpg)的图像
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-15
    • 1970-01-01
    • 2018-12-28
    • 1970-01-01
    • 2011-03-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多