用servlet进行用户名和密码校验

最新推荐文章于 2019-03-30 17:39:00 发布
最新推荐文章于 2019-03-30 17:39:00 发布
阅读量270 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：http://www.cnblogs.com/chacha-z/p/10608838.html
版权 
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
}

#topBar {
    width: 100%;
    background-color: #f5f5f5;
    height: 70px;
}

#topBar .topContent {
    width: 964px;
    margin-left: auto;
    margin-right:auto;
}

#topBar i {
    display: inline-block;
    width: 50px;
    height: 50px;
    float: left;
    margin-top: 10px;
    background: url(../images/login_logo.png) no-repeat;
}

#topBar p {
    display: inline;
    line-height: 70px;
    margin-left: 10px;
    border-left: solid 1px #aaa;
    padding-left: 10px;
}

#topBar span {
    width: 50px;
    float: right;
    line-height: 70px;
}

#main {
    overflow: hidden;
    width: 964px;
    height: 462px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background: url(../images/login_bg_03.jpg) no-repeat;
}

.login_form {
    width: 35%;
    float: right;
    margin-top: 100px;
    margin-right: 100px;
}

.title_caption {
    font-size: 16px;
    text-align: center;
    background-color: rgba(93, 209, 161);
    color: #fff;
    height: 40px;
    line-height: 40px;
}

fieldset {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 0 2em 2em 2em;
}

fieldset #login-info {
    display: block;
    text-align: center;
    height: 2em;
    line-height: 2em;
    font-size: 17px;
    font-weight: normal;
    color: #fff;
    background-color: rgba(221, 133, 118, 0.5);
    visibility: hidden;
}

.login_input{
    position: relative;
    margin-bottom: 20px;
}

.login_input i {
    width: 26px;
    height: 26px;
    margin: 1px;
    position: absolute;
    left: 0;
    bottom: 1em;
}

.login_input i.login_icon_user {
    background: url(../images/user.png);
}

.login_input i.login_icon_pass {
    background: url(../images/lock.png);
}


.login_input input {
    background: transparent;
    border: none;
    height: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(93, 209, 161);
    font-size: 15px;
    color: #fff;
    color: rgb(131, 138, 145);
    outline: none;
}

button[type="submit"] {
    width: 40%;
    height: 30px;
    float: right;
    background-color: rgb(93, 209, 161,0.9);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.login_sub_in input:hover {
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

#foot {
    background: #f7f7f7;
    color: #999;
    width: 964px;
    margin-left: auto;
    margin-right: auto;
}

#foot p {
    
    font-size: 13px;
    text-align: center;
    height: 70px;
    line-height: 70px;
}
CSS

 0.链接

链接：https://pan.baidu.com/s/1ObPCgbw4khosixhrY1J1IA
提取码：qxu8 

1.实现效果

 

 

2.关键：

1）使用JS提交表单的方法：

方法一：弊端——无法使用回车键提交表单

方法二：使用form表单元素的onSubmit()方法，返回ture

2）乱码解决

2.代码

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class check
 */
@WebServlet("/check")
public class check extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public check() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        
        String userName = request.getParameter("checkInID");
        String userPass = request.getParameter("checkInPass");
        
        response.getWriter().write("用户名：" + userName);
        response.getWriter().write("</br>");
        response.getWriter().write("密码：" + userPass);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
servlet

 

function checkForm(){

    var subButton = document.getElementById("subBut");
    var userID = document.getElementById("checkInID");
    var userP = document.getElementById("checkInPass");
    
    if(userID.value == "" || userP.value == ""){
        var info = document.getElementById("login-info");
        var infoStyle = info.style;
        infoStyle.visibility = "visible";
        info.innerText = "用户名或密码不能为空";
        return false;
    }else{
        return true;
    }
}
JS

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>登录</title>
        <link href="style/loginP.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="script/identify.js"></script>
    </head>
    <body>
        <div id="topBar">
            <div class="topContent">
                <i></i>
                <p>西南石油大学新闻发布后台登录</p>
                <span>帮助</span>
            </div>
        </div>

        <div id="main">
            <div id="sign_in_part" class="login_form">
                <p class="title_caption">账号登录</p>
                <div class="login_block">
                    <form method="post" action="check" id="loginForm" onsubmit="return checkForm()">
                        <fieldset>
                            <h1 id="login-info">用户登录</h1>
                            <div class="login_input">
                                <input type="text" id="checkInID" name="checkInID" placeholder="请输入账号" required/>
                                <div class="clear"></div>
                            </div>
                            <div class="login_input">
                                <input type="password" id="checkInPass" name="checkInPass" placeholder="请输入密码" required/>
                                <div class="clear"></div>
                            </div>
                            
                            <div class="login_sub_in">
                                <button type="submit" value="登录" id="subBut">登录</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <div id="foot">
            <p>西南石油大学登录</p>
        </div>
    </body>
</html>
HTML

 

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
}

#topBar {
    width: 100%;
    background-color: #f5f5f5;
    height: 70px;
}

#topBar .topContent {
    width: 964px;
    margin-left: auto;
    margin-right:auto;
}

#topBar i {
    display: inline-block;
    width: 50px;
    height: 50px;
    float: left;
    margin-top: 10px;
    background: url(../images/login_logo.png) no-repeat;
}

#topBar p {
    display: inline;
    line-height: 70px;
    margin-left: 10px;
    border-left: solid 1px #aaa;
    padding-left: 10px;
}

#topBar span {
    width: 50px;
    float: right;
    line-height: 70px;
}

#main {
    overflow: hidden;
    width: 964px;
    height: 462px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background: url(../images/login_bg_03.jpg) no-repeat;
}

.login_form {
    width: 35%;
    float: right;
    margin-top: 100px;
    margin-right: 100px;
}

.title_caption {
    font-size: 16px;
    text-align: center;
    background-color: rgba(93, 209, 161);
    color: #fff;
    height: 40px;
    line-height: 40px;
}

fieldset {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 0 2em 2em 2em;
}

fieldset #login-info {
    display: block;
    text-align: center;
    height: 2em;
    line-height: 2em;
    font-size: 17px;
    font-weight: normal;
    color: #fff;
    background-color: rgba(221, 133, 118, 0.5);
    visibility: hidden;
}

.login_input{
    position: relative;
    margin-bottom: 20px;
}

.login_input i {
    width: 26px;
    height: 26px;
    margin: 1px;
    position: absolute;
    left: 0;
    bottom: 1em;
}

.login_input i.login_icon_user {
    background: url(../images/user.png);
}

.login_input i.login_icon_pass {
    background: url(../images/lock.png);
}


.login_input input {
    background: transparent;
    border: none;
    height: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(93, 209, 161);
    font-size: 15px;
    color: #fff;
    color: rgb(131, 138, 145);
    outline: none;
}

button[type="submit"] {
    width: 40%;
    height: 30px;
    float: right;
    background-color: rgb(93, 209, 161,0.9);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.login_sub_in input:hover {
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

#foot {
    background: #f7f7f7;
    color: #999;
    width: 964px;
    margin-left: auto;
    margin-right: auto;
}

#foot p {
    
    font-size: 13px;
    text-align: center;
    height: 70px;
    line-height: 70px;
}
CSS

 

转载于:https://www.cnblogs.com/chacha-z/p/10608838.html

weixin_34336526
关注
Servlet快速入门，完成使用用户名密码登录的校验
qq_40922845的博客
02-21 1762
创建一个新的Web工程 如果没有安装web应用服务器将无法发布，这里需要先安装好web应用服务器（推荐Tomcat，版本影响不大，这里用的是Tomcat9）web模组版本选取2.5 在src下新建一个包，新建一个类 实现servlet接口，接口中暂时只使用servlet方法 package cn.aynortechnology.servlet; import java.io.IOExcep...
JS--用户名以及密码的检验
weixin_52283867的博客
06-16 1219
前言 从同学的优秀作品中获得启发，照猫画虎自己写了一个demo供大家参考下。 代码 <div class="wrapper"> <h3>登录界面</h3> <div class="w1"> <input type="text" name='name' id='name' required placeholder="用户名" onblur="checkName()">
servlet页面验证用户名密码
03-29
NULL 博文链接：https://cainiaoyu.iteye.com/blog/1286411
用Servlet进行用户名和密码校验
weixin_30338743的博客
03-30 221
用Servlet进行用户名和密码校验 学号：201631062509 姓名：杨菓 1.效果图 主界面图 用户名为空时 用户名或密码错误 登录成功 2.源代码 Servlet 1 import java.io.IOException; 2 import javax.servlet.ServletException; 3 import javax....
springBoot整合CXF并实现用户名密码校验的方法
08-27
SpringBoot整合CXF并实现用户名密码...在这个示例中，我们只是简单地实现了用户名密码校验，但是在实际项目中，我们可能需要使用更加复杂的校验机制，例如使用数据库来存储用户名和密码，或者使用OAuth2进行身份验证。
用户名和密码校验 1.用户名/密码不能为空 2.用户名 admin，密码 123，则提示登陆成功（控制台/提示框）；密码不为123提示登录成败 3.点击登录的时候通过地址栏提交数据用javaWeb怎么写
最新发布
09-28
在Java Web项目中，处理用户名和密码校验通常会在服务器端的控制器层（Controller）完成，这里是一个简单的示例： ```java import javax.servlet.http.HttpServletRequest; import javax.servlet....
用servlet进行用户名和密码校验1
weixin_30924087的博客
03-30 224
运行效果如下： 代码截图： 登陆网页： 显示网页： 网盘链接： 链接：https://pan.baidu.com/s/1g5XJ6y8u5R5Wt0Lkj9g9lg 提取码：bphb 转载于:https://www.cnblogs.com/319064057-lx/p/10628254.html...
用SERVLET进行用户名和密码验证
weixin_30702413的博客
03-23 1536
一、界面展示 二、登录成功显示 三、代码 html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 &lt...
用servlet进行用户名和密码校验01
admin270492705的博客
03-30 787
用servlet进行用户名和密码校验01 编写一个servlet进行用户名和密码校验，获取登录页面的用户名密码，并显示出来 1.工作目录结构 2.首先是一个login.html，包含非常简单的登录表单 3.在servlet的doGet方法中 （中间数据库检验部分省略） 4.运行效果 登录成功效果如下，显示用户名密码 登录失败效果如下， ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值