jiaxiaoqiang
/
training-web


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style>
        input:required {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="email" id="email" placeholder="Email" title="dddd" required>
<br/>
<label for="FS">选择一个小于 75 kB 的文件：</label>
<input type="file" id="FS" />
<input type="text" id="function" onchange="onInputChange()"/>
<script>
    var email = document.getElementById('email');
    email.addEventListener("blur", function (event) {
        if (email.validity && !email.validity.valid) {
            event.preventDefault();
            email.setCustomValidity("Please enter a valid email address.")
            // alert("Please enter a valid email address.");
        }
    })

    function checkFileSize() {
        const FS = document.getElementById("FS");
        const files = FS.files;

        // 如果选择了（至少）一个文件
        if (files.length > 0) {
            if (files[0].size > 2 ) {
                // 检查约束条件
                alert("文件大小不能超过 75 kB")
                console.log(FS.setCustomValidity("文件大小不能超过 75 kB"));

            }
        }
        // 没有违反自定义约束条件
        FS.setCustomValidity("");
    }

    let fileEle = document.getElementById('FS');
    fileEle.addEventListener('change', checkFileSize, false);

    function onInputChange(e) {
        console.log("onInputChange", e)
    }

</script>
</body>
</html>