如何用jQuery点击提交时验证文件类型？及pancard_img验证错误修复

我来帮你搞定这两个表单验证的需求，咱们先拆解现有代码的问题，再给出完整的修复方案：

现有代码的核心问题 #

1. 选择器语法错误：判断输入值的时候，("#pancard")和("#pancard_img")都缺少了jQuery的$符号，这会导致代码无法正确获取输入元素，进而出现错误的空值判断。
2. 文件输入的无效预设：HTML里给<input type="file">设置value="Pan1.png"是没用的——浏览器出于安全限制，不允许预先指定用户要上传的文件，所以这个值不会被系统识别，这也是为什么即使你设置了value，仍然会收到“Pancard image should not be empty”提示的原因。
3. 缺少文件类型验证逻辑：这是你第一个需求要实现的功能，咱们需要添加代码来检查上传文件的格式是否符合要求。

修复后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
    <input type="text" name="pancard" id="pancard" />
    <div id="err_pan" style="color: red;"></div>
    <input type="file" name="pancard_img" id="pancard_img" />
    <div id="err_pan_img" style="color: red;"></div>
    <input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" />
</form>

<script>
$(document).ready(function() {
    $("#submit").click(function(e) {
        e.preventDefault();
        
        // 先清空所有错误提示
        $("#err_pan").html("");
        $("#err_pan_img").html("");
        
        let isValid = true;
        
        // 验证Pancard文本输入
        if ($("#pancard").val().trim() == '') {
            $("#err_pan").html("Pancard should not be empty");
            isValid = false;
        }
        
        // 验证Pancard图片是否选择
        const panFileInput = $("#pancard_img")[0];
        if (panFileInput.files.length === 0) {
            $("#err_pan_img").html("Pancard image should not be empty");
            isValid = false;
        } else {
            // 验证文件类型
            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            const fileType = panFileInput.files[0].type;
            if (!allowedTypes.includes(fileType)) {
                $("#err_pan_img").html("Please upload a valid image file (JPG, PNG, JPEG)");
                isValid = false;
            }
        }
        
        // 所有验证通过
        if (isValid) {
            alert("successful");
            // 如果需要提交表单，可以在这里添加 $("#myform").submit();
        }
    });
});
</script>

关键修复和新增功能说明 #

• 修复空值判断：用$("#pancard_img")[0].files.length === 0来判断是否选择了文件，这是检查文件输入是否有值的可靠方式，替代了之前错误的val()判断。
• 文件类型验证：定义了允许的图片类型数组，通过获取文件的type属性来校验，确保用户只能上传指定格式的图片。
• 错误提示优化：每次提交前先清空错误提示，避免重复显示错误信息，提升用户体验。
• 修正选择器：把所有缺失$的选择器都补全，确保能正确获取DOM元素的值。

内容的提问来源于stack exchange，提问作者navi