为什么无法弹窗提示未输入字符

问题遇到的现象和发生背景

初学html，为什么无法弹窗

问题相关代码，请勿粘贴截图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新用户注册html实现</title>
    <script type="text/javascript">
            function validate_form(thisform)
            {
                with (thisform)
                {
                    if (validate_required(UserName,"用户名 必须填写!")==false)
                        {UserName.focus();return false}
                    if (validate_required(Pwd1,"密码 必须填写!")==false)
                        {Pwd1.focus();return false}
                    if (validate_required(Pwd2,"确认密码 必须填写!")==false)
                        {Pwd2.focus();return false} 
                    if (validate_required(Email,"Email 必须填写!")==false)
                        {Email.focus();return false}
                    if(validate_equal(Pwd1,Pwd2,"密码必须一致！")==false)
                        {Pwd1.focus();return false}
                }
            }
           function validate_required(field,alerttxt)
           {
            with (field)
               {
                if (value==null||value=="")
                    {alert(alerttxt);return false}
                else {return true}
                 }
            }
            function validate_equal(field1,field2,alerttxt)
            {
                if (field1.value!=field2.value)
                {
                    alert(alerttxt);return false;
                }
                else{return true}
            }
    </script>
 </head>
<body>
    <form action="submitpage.html" onsubmit="return validate_form(this)" method="post"> 
    <table border="1" align="center">
        <tr>
            <td colspan="2">用户注册</td>
            <td></td>
        </tr>
        <tr>
        <td>用户名</td>
        <td><input type="text" name="Username" size="30"></td>
        </tr>
                <tr>
            <td>密码</td>
            <td><input type="password" name="Pwd1" size="30"></td>
        </tr>
                <tr>
            <td>确认密码</td>
            <td><input type="password" name="Pwd2" size="30"></td>
        </tr>
                <tr>
            <td>Email</td>
            <td><input type="text" name="Email" size="30"></td>
        </tr>
                <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
    </form>
</body>
</html>

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新用户注册html实现</title></head>
<body>
    <form action="submitpage.html" onsubmit="return validate_form()"> 
    <table border="1" align="center">
        <tr>
            <td colspan="2">用户注册</td>
            <td></td>
        </tr>
        <tr>
        <td>用户名</td>
        <td><input type="text" name="Username" id="UserName" size="30"></td>
        </tr>
                <tr>
            <td>密码</td>
            <td><input type="password" name="Pwd1" id="Pwd1" size="30"></td>
        </tr>
                <tr>
            <td>确认密码</td>
            <td><input type="password" name="Pwd2" id="Pwd2" size="30"></td>
        </tr>
                <tr>
            <td>Email</td>
            <td><input type="text" name="Email" id="Email" size="30"></td>
        </tr>
                <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
    </form>
</body>
    <script type="text/javascript">
            function validate_form(){
                if (!UserName.value) {
                    UserName.focus();
                    alert("用户名 必须填写!");
                    return false
                }
                if (!Pwd1.value) {
                    Pwd1.focus();
                    alert("密码 必须填写!");
                    return false
                }
                if (!Pwd2.value) {
                    Pwd2.focus();
                    alert("确认密码 必须填写!");
                    return false
                }
                if (!Email.value) {
                    Email.focus();
                    alert("Email 必须填写!");
                    return false
                }
                if (Pwd1.value !== Pwd2.value) {
                    Email.focus();
                    alert("密码必须一致!");
                    return false
                }
            }
    </script>
 
</html>

你好，
请用 get 方法，而且将 validate_required 方法写在 validate_form 之前。

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function validate_required(field, alerttxt) {
            with (field) {
                if (value == null || value == "") { alert(alerttxt); return false; }
                else { return true }
            }
        }
        function validate_form(thisform) {
            with (thisform) {
                if (validate_required(Username, "Username must be filled out!") == false) { email.focus(); return false; }
                if (validate_required(Pwd1, "Pwd1 must be filled out!") == false) { email.focus(); return false; }
                if (validate_required(Pwd2, "Pwd2 must be filled out!") == false) { email.focus(); return false; }
                if (validate_required(Email, "Email must be filled out!") == false) { email.focus(); return false; }
            }
        }
    </script>
</head>
<body>
    <form action="HtmlPage2.html"
          onsubmit="return validate_form(this)"
          method="get">
        Username: <input type="text" name="Username" size="30">
        Pwd1: <input type="password" name="Pwd1" size="30">
        Pwd2: <input type="password" name="Pwd2" size="30">
        Email: <input type="text" name="Email" size="30">
        <input type="submit" value="注册">
    </form>
</body>