课堂测试——jsp登录界面设计

实现结果：在login.jsp页面提交用户名和密码(可以验证是否为空)，点击登录跳转到loginResult.jsp页面进行验证并显示结果

JSP + JDBC + MySQL

设计一个表单，内容为两个输入框，一个用来输入用户名，另一个用来输入密码，并有一个提交按钮

用JavaScript函数验证输入框是否都不为空

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    
    function check() {
        var user = $("user").value;
        var pwd = $("pwd").value;
        
        $("userInfo").innerHTML="";
        $("pwdInfo").innerHTML="";
        
        if(user == "") {
            $("userInfo").innerHTML="用户名不能为空！";
            $("user").focus();
            return false;
        }
        
        if(pwd == "") {
            $("pwdInfo").innerHTML="密码不能为空！";
            $("pwd").focus();
            return false;
        }
        
        return true;
    }
</script>

<style type="text/css">
    #userInfo{color:red;}
    #pwdInfo{color:red;}
</style>

<title>登录</title>

</head>

<body>
    <center>
        <form action="loginResult.jsp" method="post" onsubmit="return check()">
            <br><br><br><br><br><br>
            <table>
                <tr><td>用户名：</td><td><input type="text" name="userName" id="user"><span id="userInfo" ></span></td></tr>
                <tr><td>密码：</td><td><input type="password" name="userPwd" id="pwd"><span id="pwdInfo"></span></td></tr>
                <tr><td></td><td><input type="submit" value="登     录"></td>
                
            </table>
        </form>
    </center>
</body>

</html>

　　课堂测试未按时完成原因：假期未合理分配时间在该科目上导致未按时完成实现预期。

　　希望通过该课上可以开发简单有趣的小程序（app）。预计每周在该课程上花费8h。（努力吧！）