菜鸟学堂
在线运行
源代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Validate 插件 - 文件输入框</title> <link rel="stylesheet" media="screen" href="/assets/jquery-validation-1.14.0/demo/css/screen.css"> <link rel="stylesheet" href="/assets/jquery-validation-1.14.0/demo/css/cmxform.css" /> <script src="http://edu.jb51.net/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://edu.jb51.net/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://edu.jb51.net/assets/jquery-validation-1.14.0/dist/additional-methods.js"></script> <script src="http://edu.jb51.net/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#fileForm").validate(); }); </script> </head> <body> <form class="cmxform" id="fileForm" method="post" action=""> <fieldset> <legend>选择指定类型的文件？</legend> <p> <label for="file1">选择一个纯文本文件（例如 *.txt）</label> <input type="file" id="file1" name="file1" class="required" accept="text/plain" /> </p> <p> <label for="file2">选择任何图像文件</label> <input type="file" id="file2" name="file2" class="required" accept="image/*"/> </p> <p> <label for="file3">选择一个 PDF 或 EPS 文件</label> <input type="file" id="file3" name="file3" class="required" accept="image/x-eps,application/pdf"/> </p> <p> <label for="file4">选择任何音频或图像文件</label> <input type="file" id="file4" name="file4" class="required" accept="image/*,audio/*"/> </p> <p> <label for="file5">选择一个或多个纯文本文件（例如 *.txt）</label> <input type="file" id="file5" name="file5" class="required" multiple accept="text/plain" /> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
运行结果
在线运行
菜鸟学堂 edu.jb51.net