zoukankan      html  css  js  c++  java
  • 课堂测试——jsp登录界面设计

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

    JSP + JDBC + MySQL

    login.jsp

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

    用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。(努力吧!)

      

  • 相关阅读:
    Linux
    python 鸢尾花数据集报表展示
    python 词云
    毕业设计回顾
    editor.md
    杂记
    垃圾回收器
    杂记
    随笔
    杂记
  • 原文地址:https://www.cnblogs.com/XiaoPiHaiEr/p/6473510.html
Copyright © 2011-2022 走看看