Javascript 使用JS对HTML表单进行文件类型验证后，如果控件无效，则控件应保持在同一页面上

我有一个html表单，其中对于文件类型，我只需要pdf、docx和doc文件。我可以成功地验证，但单击“确定”按钮后，如果表单无效，我不想发布表单。目前，它将转到connection.php。只有在我成功通过验证后，它才会转到connection.php

<form method="POST" action="connection.php" enctype="multipart/form-data" onsubmit="function()">
<input type="text" id="name" name="bookname" placeholder="Book Name" required/>
<textarea cols="25" rows="4" name="bookdesc" placeholder="Book Description" required></textarea>
<input type="text" id="password" name="bookauthor" placeholder="Book Author"/ required>
<input type="file" name="bookfile" id="bookfile" required/>
</form>
    <script>
        $(document).ready(function () {
        $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase();
        var regex = new RegExp("(.*?)\.(docx|doc|pdf)$");
         if(!(regex.test(val))) {
        $(this).val('');
        alert('Please select correct file format');
        } }); });
    </script> 

使用onsubmit事件：

---

我已在您的表单中添加了一个id。使用这个id作为选择器，我为表单创建了一个提交处理程序。此处理程序检查isValid是否为false，如果为false，则调用e.preventDefault，以防止表单提交。如果isValid为true，则不会调用e.preventDefault，因此表单将提交。isValid初始化为false，并在输入[type=file]更改时进行计算。

我已更新了我的答案，因为：1表单缺少提交按钮，2 javascript代码依赖于jQuery库-我已删除依赖项。我可以使用onsubmit=return validatethis实现同样的结果。谢谢：如果您需要验证文件内容，您应该在服务器端进行验证。您可以使用Ajax满足“如果无效，则保持在同一页面上”的要求。文件扩展名无法确保内容。当我使用此文件时，在上载jpeg文件并单击“提交”时，不会收到任何错误消息。它直接进入连接。php@Alapan您是否为表单标记定义了id？

<form method="POST" action="connection.php" enctype="multipart/form-data" onsubmit="return validate()">
<input type="text" id="name" name="bookname" placeholder="Book Name" required/>
<textarea cols="25" rows="4" name="bookdesc" placeholder="Book Description" required></textarea>
<input type="text" id="password" name="bookauthor" placeholder="Book Author"/ required>
<input type="file" name="bookfile" id="bookfile" required/>
<input type="submit" value="Upload book">
</form>
<script>
    function validate() {
    var val = document.getElementById('bookfile').value.toLowerCase();
    var regex = new RegExp("(.*?)\.(docx|doc|pdf)$");
        if(!(regex.test(val))) {
            document.getElementById('bookfile').value = '';
            alert('Please select correct file format');
            return false;    
        }
        return true;
    }
</script> 

<form method="POST" action="connection.php" enctype="multipart/form-data" id="myform">
<input type="text" id="name" name="bookname" placeholder="Book Name" required/>
<textarea cols="25" rows="4" name="bookdesc" placeholder="Book Description" required></textarea>
<input type="text" id="password" name="bookauthor" placeholder="Book Author"/ required>
<input type="file" name="bookfile" id="bookfile" required/>
</form>
    <script>
        var isValid = false;
        $(document).ready(function () {
        $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase();
        var regex = new RegExp("(.*?)\.(docx|doc|pdf)$");
        isValid = !!(regex.test(val));
         if(!isValid) {
        $(this).val('');
        alert('Please select correct file format');
        } }); });
        $("#myform").submit(function(e) {
            if (!isValid) {
                e.preventDefault();
            }
        });
    </script>