Javascript 表单验证问题，包括输入文件

我有一个非常简单的表单来输入用户名并选择要上传的文件。用户名是必需的，但文件不是。它的样式和功能，以检查文件类型和大小之前，提交表单。如果您选择了错误的文件，该功能将正常工作，并且“提交”按钮将被禁用。如果不选择文件，用户名验证将不起作用。如果在文本输入中单击，则它将变为红色，但表单将提交。

HTML

用户名

JS

函数checkUser（）{
var userlen=$（“#user”）.val（）.length；
if（userlen-1）{
console.log（'y'）；
size=file.size；
控制台日志（大小）；
如果（大小>10000000）{
警报（“文件大小大于10 MB”）；
$（“保存”）.attr（“禁用”、“禁用”）；
返回false；
}
否则{
$（“保存”）.removeAttr（“禁用”）；
返回true；
}
}
否则{
警报（“不允许使用文件类型”）；
$（“保存”）.attr（“禁用”、“禁用”）；
返回false；
}
});
函数验证（）{
$.each（$（'form:input'），function（）{
$（this.blur（）.change（）；
});
如果（！checkUser（））{
返回false；
}
否则{
返回true；
}
}

这是如何使其工作的：

将“提交”按钮更改为普通按钮，并向其添加

onclick

属性

从

表单

标记中删除

onsubmit

属性

如果

checkUser（）

返回true，请将

validate（）

函数更改为提交表单

就这样

---

---

希望这对你有用

表单验证（提交）的正确方案是什么？如果用户名长度小于4个字符，则不应提交表单。我在实际应用程序中有其他表单元素，并在检查用户名时检查它们。

<form method="post" class="contact" onsubmit="return validate();" enctype="multipart/form-data">
        <table cellspacing="30">
            <tr>
                <td>
                    <label id="userlabel">user name</label>
                    <input type="text" id="user" name="username" onblur="checkUser()"></td>                  
            </tr>

            <tr>
                <td>
                    <div id="FileUpload">
                        <input type="file" size="4" id="BrowserHidden" 
onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" name="pic" />
                        <div id="BrowserVisible"><input type="text" id="FileField" /></div>
                    </div>
                </td>
                </tr>
                <tr>
                <td><input type="submit" name="send" id="save" value="send" /></td>
            </tr>
        </table>
    </form>

function checkUser(){
    var userlen = $("#user").val().length;
    if(userlen<4){
        $("#userlabel").css("color","rgb(224, 19, 19)");
        return false;
    }
    else{
        $("#userlabel").css("color","#000");
        return true;
    }
}

$("#BrowserHidden").change(function (e) {
 var file = this.files[0];
 var name = file.name;
 var extension = name.substr((name.lastIndexOf('.') + 1));
 var str = 'doc,docx,pdf';
 if (str.indexOf(extension) > -1) {
 console.log('y');
 size = file.size;
 console.log(size);
 if (size > 10000000) {
 alert('file size is larger than 10 MB');
 $("#save").attr("disabled", "disabled");
 return false;
 }
 else {
 $("#save").removeAttr("disabled");
 return true;
 }
 }
 else {
 alert('file type is not allowed');
 $("#save").attr("disabled", "disabled");
 return false;
 }
 });

 function validate(){
    $.each($('form :input'),function(){
        $(this).blur().change();
    });
    if(!checkUser() ){
        return false;
    }
    else{
        return true;
    }
}