实现结果：在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. CF1139E Maximize Mex（二分图匹配，匈牙利算法）

    好题.不过之前做过的[SCOI2010]连续攻击游戏跟这题一个套路,我怎么没想到…… 题目链接:CF原网 洛谷 题目大意:在一个学校有 $n$ 个学生和 $m$ 个社团,每个学生有一个非负整数能力值 ...

  2. 外围功能电路控制 LET′S TRY“嵌入式编程”: 4 of 6

    外围功能电路控制 LET′S TRY“嵌入式编程”: 4 of 6 本连载讲解作为嵌入式系统开发技术人员所必需具备的单片机的基础知识. 在<单片机入门(1)-(3)>中,我们一起学习了单片 ...

  3. 省市区三级数据的MYSQL内容

    省市区三级数据的MYSQL内容 省: /* Navicat MySQL Data Transfer Source Server : rm-2ze0lz594rof5nn72.mysql.rds.ali ...

  4. 洛谷P5111 zhtobu3232的线段树

    题意:给定线段树,上面若干个节点坏了,求能表示出多少区间. 区间能被表示出当且仅当拆出来的log个节点都是好的. 解:每个区间在最浅的节点处计算答案. 对于每个节点维护从左边过来能有多少区间,从右边过 ...

  5. [luogu3377][左偏树(可并堆)]

    题目链接 思路 左偏树的模板题,参考左偏树学习笔记 对于这道题我是用一个并查集维护出了哪些点是在同一棵树上,也可以直接log的往上跳寻找根节点 代码 #include<cstdio> #i ...

  6. numpy 多维数组及数组操作

    NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...

  7. undefined is not an object(evaluating '_react3.default.PropTypes.shape)

    手机红屏报这个错时的解决办法: npm uninstall --save react-native-deprecated-custom-components npm install --save ht ...

  8. Echarts CPU监控 （折线仪表盘，图例混搭）

    https://blog.csdn.net/mengxiangfeiyang/article/details/44802939 CPU page   <script type="tex ...

  9. SWOT分析法——进行项目管理的高效方法

    SWOT分析法是什么 SWOT分析法,即态势分析法,就是将与研究对象密切相关的各种主要内部优势.劣势和外部的机会和威胁等,通过调查列举出来,并依照矩阵形式排列,然后用系统分析的思想,把各种因素相互匹配 ...

  10. struts2 对EL的改变

    Struts2对EL的改变 1.Struts2中使用EL的问题: 前提: 我们应该知道,如果我们没有往值栈(根)中放入数据的话,那么我们的动作类默认是在值栈的栈顶 2.关于EL问题的分析: 分析:   ...