实现结果：在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。（努力吧！）

　　

课堂测试——jsp登录界面设计的更多相关文章

  1. Python图形编程探索系列-07-程序登录界面设计

    设计任务 初步设计程序登录界面,详细分析设计步骤. 程序详细分析 基本框架设计 import tkinter as tk import tkinter.messagebox root = tk.Tk( ...

  2. 第四篇——Spring音乐登录界面设计及实现(C#)

    Spring音乐播放器,我们小组设计其启动时有一个登录界面,用户初次可以注册,输入用户名和密码,点击注册即将输入信息保存到register文本文件中:如果已有用户名,输入用户名和密码,点击登录,程序会 ...

  3. Qt常用的登录界面设计

    记录一下Qt常用的登录界面的设计 方便以后使用! 1.QpushButton改变一个按钮的颜色,当鼠标放上去和移开时显示不同的颜色.QPushButton { background-color: rg ...

  4. tkinter+pickle+python的一个登录界面设计

    1.代码: #导出模块 import tkinter as tk from tkinter import messagebox import pickle #定义登录的窗口.标题.大小和位置 wind ...

  5. Bootstrap风格登录界面设计样例

    参考:http://bootsnipp.com/tags/login Register Page   127.8K 187 Modal Login with jQuery Effects   159. ...

  6. 用jsp实现网站登录界面的制作，并连接数据库

    课堂测试 任务需求: 撰写一篇博客 需要网站系统开发需要掌握的技术: 本次课堂测试的源程序代码: 运行结果截图: 说明课堂测试未按时完成的原因. 列出你对这门课的希望和自己的目标,并具体列出你计划每周 ...

  7. 课堂测试_WEB界面链接数据库

    课堂测试_WEB界面链接数据库 一,题目: 一. 考试要求: 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求 ...

  8. 初识Jsp，JavaBean,Servlet以及一个简单mvc模式的登录界面

    1:JSP JSP的基本语法:指令标识page,include,taglib;page指令标识常用的属性包含Language用来定义要使用的脚本语言:contentType定义JSP字符的编码和页面响 ...

  9. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

随机推荐

  1. PHP基础学习----字符串操作

    1.单引号和双引号的区别 在php中,字符串的定义可以使用英文单引号'',也可以使用英文双引号“”: <?php $str = 'hello'; echo "str is $str&q ...

  2. jquery 事件的绑定,触发和解绑

    js和jquery绑定的区别? HTML或原生js是单一对应绑定的,绑多了只留最后一个.jQuery是追加绑定的,绑多少执行多少.这个在每一本jQuery的书中都是首先提到的事情. jquery绑定与 ...

  3. OpenLayers学习笔记（四）— QML显示html中openlayers地图的坐标

    GitHub:八至 作者:狐狸家的鱼 本文链接:实现QML中显示html中地图的坐标 如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了 1.HTML var coord; ...

  4. js 日期比较大小，js判断日期是否在区间内，js判断时间段是否在另外一个时间段内

    /** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...

  5. django orm 重点大全

    1.最简单的跨表,查询外键表中符合主表条件的记录列表 #用户类型表 class User_typ(models.Model): name=models.CharField(max_length=32) ...

  6. canvas的api小结

    HTML <canvas id="canvas"></canvas> Javascript var canvas=document.getElementBy ...

  7. linux系统调用之文件系统操作

    access 确定文件的可存取性 chdir 改变当前工作目录 fchdir 参见chdir chmod 改变文件方式 fchmod 参见chmod chown 改变文件的属主或用户组 fchown ...

  8. Proxy代理模式

    https://www.cnblogs.com/vincentzh/p/5988145.html https://www.cnblogs.com/wrbxdj/p/5267370.html(不错)

  9. 2018.12.21 浪在ACM 集训队第十次测试赛

     浪在ACM 集训队第十次测试赛 A Diverse Substring B Vasya and Books C Birthday D LCM A 传送门 题解 B 传送门 题解: 这道题,就比较简单 ...

  10. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...