BootWiki教程网
源代码:
点击运行
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>jQuery Validate 插件 - 文件输入框</title> <link href="//www.bootwiki.com/assets/jquery-validation-1.14.0/demo/css/screen.css" media="screen" rel="stylesheet"> <link href="//www.bootwiki.com/assets/jquery-validation-1.14.0/demo/css/cmxform.css" rel="stylesheet" /> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="//www.bootwiki.com/assets/jquery-validation-1.14.0/dist/additional-methods.js"></script> <script src="//www.bootwiki.com/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 action="" class="cmxform" id="fileForm" method="post"> <fieldset> <legend>选择指定类型的文件?</legend> <p> <label for="file1">选择一个纯文本文件(例如 *.txt)</label> <input accept="text/plain" class="required" id="file1" name="file1" type="file" /> </p> <p> <label for="file2">选择任何图像文件</label> <input accept="image/*" class="required" id="file2" name="file2" type="file"/> </p> <p> <label for="file3">选择一个 PDF 或 EPS 文件</label> <input accept="image/x-eps,application/pdf" class="required" id="file3" name="file3" type="file"/> </p> <p> <label for="file4">选择任何音频或图像文件</label> <input accept="image/*,audio/*" class="required" id="file4" name="file4" type="file"/> </p> <p> <label for="file5">选择一个或多个纯文本文件(例如 *.txt)</label> <input accept="text/plain" class="required" id="file5" multiple name="file5" type="file" /> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
运行结果