用户登录实例01

1.为了方便校验，登录表单中按钮要写成这样，不然会默认是submit

<div align="center">
    <form action="loginServlet" method="post" id="loginForm">
        姓名：<input name="uname" type="text"><br>
        密码：<input name="upwd" type="password"><br>
<%--要写明为button类型，不然默认submit，一按就会提交表单，不能进行效验--%>
        <button type="button">登录</button>
        <button type="button">注册</button>
    </form>
</div>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
</head>
<body>
<div align="center">
    <form action="loginServlet" method="post" id="loginForm">
        姓名：<input name="uname" type="text" id="uname"><br>
        密码：<input name="upwd" type="password" id="upwd"><br>
<%--要写明为button类型，不然默认submit，一按就会提交表单，不能进行效验--%>
        <span id="msg" style="font-size: 12px;color: red"></span><br>
        <button type="button" id="loginBtn">登录</button>
        <button type="button">注册</button>
    </form>
<%--
        用户登录JS校验
        登录表单验证：
            1.给登录按钮绑定点击事件
            2.获取用户的姓名和密码
            3.判断姓名是否为空
                如果为空，提示用户（span标签），并且return
            4.判断密码是否为空
            5.提交表单
--%>
</div>
</body>
<%--引入Jquery的js文件--%>
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
<%--  给登录按钮绑定点击事件：通过id选择器进行绑定  --%>
    $("#loginBtn").click(function (){
    //    获取用户姓名和密码的值
        var uname=$("#uname").val();
        var upwd=$("#upwd").val();
        if(isEmpty(uname)){
        //通过id选择器找到span，然后给span赋值，提醒用户
            $("#msg").html("用户姓名不可以为空");
            return;
        }
        if(isEmpty(upwd)){
            $("#msg").html("用户密码不能为空");
            return;
        }
    //    如果都符合要求了，则进行提交表单的操作
    //    通过id选择器找到表单
        $("#loginForm").submit();
    });
    //判断字符串是否为空
    function isEmpty(str){
        if(str==null||str.trim()==""){
            return true;
        }
        return false;
    }
</script>

</html>

2.注意点：

1）想要知道是否加入了js，可以在浏览器进行调试：

在页面：右键->检查->源代码/Sources

找到相应的jsp文件进行断点，调试。

posted on 2022-10-21 00:10 201812 阅读(36) 评论(0) 收藏举报