表单验证案例``` 欢迎注册账号： //输入框用户名格式错误 //提示错误信息密码：密码格式错误手机号：手机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎注册</h1>
<form  id="form" action="#" method="get">
    账号：
    <input name="username"  id="username" /><br> //输入框
    <span id="checkUserName"  class="err_msg" style="display: none">用户名格式错误</span><br> //提示错误信息
    密码：
    <input name="password" type="password" id="password" /><br>
    <span id="checkPassword"  class="err_msg" style="display: none">密码格式错误</span><br>
    手机号：
    <input name="phone" id="phone" /><br>
    <span id="checkPhone"  class="err_msg" style="display: none">手机号格式错误</span><br>
    <input type="submit">
</form>
<script>
    var usernameInput = document.getElementById("username");//根据id获取对象
    usernameInput.onblur = checkUserName;
        function checkUserName() {
        var username = usernameInput.value.trim();//获取输入框的内容
        let flag = username.length >=6 && username.length <= 12;
        if(flag){
            document.getElementById("checkUserName").style.display="none"; // 为true时将错误信息隐藏
        }else{
            document.getElementById("checkUserName").style.display=''; // 为false时提示错误信息
        }
        return flag;//返回结果
    }
    var passwordInput = document.getElementById("password");
    passwordInput.onblur = checkPassword;
        function checkPassword() {
        var password = passwordInput.value.trim();
        let flag = password.length >=6 && password.length <= 12
        if(flag){
            document.getElementById("checkPassword").style.display="none";
        }else{
            document.getElementById("checkPassword").style.display='';
        }
        return flag
    }
    var phoneInput = document.getElementById("phone");
    phoneInput.onblur = checkPhone;
        function checkPhone() {
        var phone = phoneInput.value.trim();
        let flag = phone.length === 11;
        if(flag){
            document.getElementById("checkPhone").style.display="none";
        }else{
            document.getElementById("checkPhone").style.display='';
        }
        return flag;
    }
        var remForm = document.getElementById("form");
        remForm.onsubmit = function () {
            var flag = checkUserName() && checkPassword() && checkPhone()//如果全部结果为true就提交用户信息
            return flag;
        }
    
</script>
</body>
</html>