2

我正在使用验证器插件来验证我的表单。我有一个带有 type=file 的单个输入框的简单表单。

我已经设置了一条规则，我认为该规则将表单字段设置为必需。当表单加载时，我点击提交按钮而不输入文件名或浏览文件，表单得到验证。

我需要表单验证失败并生成一条错误消息，说明需要选择一个文件。

任何帮助是极大的赞赏。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test_file_upload.aspx.vb" Inherits="ARDirectWithMobile.test_file_upload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="titleTag"><%: Page.Title %> 401(k) Account</title>
<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>  
    <script src="Scripts/bootstrap.min.js"></script>  
    <link runat="server" id="StyleLink1" rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="Content/bootstrapValidator.min.css"/> 
    <script type="text/javascript" src="Scripts/bootstrapValidator.min.js"> </script>
</head>
<body>

<form id="contactForm" runat="server" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">File Name</label>
        <div class="col-md-6 bs-example">
            <input type="file" class="form-control" name="uploadfile" />
            <asp:Label ID="Label3" runat="server" Text="Navigate to the file you wish to upload" CssClass="label_under_text"></asp:Label>	
	    </div>                          
    </div>
    <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>
    
    <script>
        $(document).ready(function () {
            $('#contactForm').bootstrapValidator({
                container: '#messages',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                rules: {
                    uploadfile: {
                        required: true
                    }
                },
                fields: {
                    uploadfile: {
                        validators: {
                            file: {
                                extension: 'txt,xls,csv',
                                message: 'You must select a valid payroll file to upload'
                            }
                        }
                    }
                }
            });
        });
    </script>
    
</body>
</html>

4

1 回答 1

2

首先你不需要rule

rules: {
    uploadfile: {
        required: true
    }
},

二、你要设置notEmptyso bootstrapValidator检查文件输入

notEmpty: {
  message: 'You must select a valid payroll file to upload'
},

第三，您必须设置typefor extensions，在您的情况下文件扩展名是'txt,xls,csv',，我认为csv也不支持，您可能需要自定义验证规则。（见底部的编辑）

BootstrapValidator 支持的文件格式

$(document).ready(function () {
    $('#contactForm').bootstrapValidator({
      container: '#messages',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        uploadfile: {
          validators: {
            notEmpty: {
              message: 'You must select a valid payroll file to upload'
            },
            file: {
              extension: 'txt,xls,csv',
              type: 'text/plain,application/vnd.ms-excel,text/csv'
            }
          }
        }
      }
    });
});

编辑：您可以csv在没有自定义验证的情况下将扩展验证为“text/csv”类型。

小提琴

于 2015-12-11T19:00:55.813 回答