jq获取焦点事件

最新推荐文章于 2021-06-13 16:31:21 发布

wittybread

最新推荐文章于 2021-06-13 16:31:21 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/wittybread/article/details/78474452

版权

本文介绍了一个使用Java实现的简单登录页面案例，通过HTML与JavaScript进行交互验证，利用JSP技术获取用户输入，并通过Servlet处理登录逻辑。文章展示了如何进行基本的前端验证、服务器端请求处理及响应。

摘要由CSDN通过智能技术生成

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'login.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript" src="/wangxuewei1510C20170728/js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(function() {
        //页面加载完成
        $("#daoruId").click(function() {
            location.href="/wangxuewei1510C20170728/servlet/DaoruServlet";
        });

        var flag1 = false;
        var flag2 = false;

        $("#nameId").blur(function() {
            var $name  = $("#nameId").val();
            var $nameSpan = $("#nameSpan");
            if($name.trim() == ""){
                $nameSpan.html("不能为空");
            }else{
                $nameSpan.html("");
                flag1 = true;
            }
        });

        $("#pwdId").blur(function() {
            var $pwd = $("#pwdId").val();
            var $pwdSpan = $("#pwdSpan");
            if($pwd.length < 6){
                $pwdSpan.html("不能小于6位");
            }else{
                $pwdSpan.html("");
                flag2 = true;
            }
        });


        $("#loginId").click(function() {
            if(flag1 && flag2){
                var url = "/wangxuewei1510C20170728/servlet/SelectServlet";
                var params = {
                    "name":$("#nameId").val(),
                    "pwd":$("#pwdId").val(),
                };
                $.post(url,params,function(data){
                    if(data == 1){
                        alert("登录成功");
                        location.href = "/wangxuewei1510C20170728/servlet/FindAllServlet";
                    }else{
                        alert("不正确");
                    }

                },"json");  

            }

        });



    });


</script>
</head>
  <body>
    用户名<input type="text" id="nameId"/><span id="nameSpan" style="color: red"></span><br>
    密　码<input type="password" id="pwdId"/><span id="pwdSpan" style="color: red"></span><br>
    <input type="button" value="登录" id="loginId"/>
    <input type="button" value="导入数据" id="daoruId"/>
  </body>
</html>