2025.1.22 表单开发基础

1、制作一个登录表单，输入账号和密码相同时显示“登录成功”，否则显示“登陆失败”。当用户选择成为会员时，显示“注册成功，欢迎成为会员”。

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<html>
  <body>
       欢迎登录
  <script type="text/javascript">
      function validate(){
            if(loginForm.account.value==loginForm.password.value&&document.getElementById("register").checked){
                alert("登录成功，欢迎成为会员");
                return;
            }
            else if(loginForm.account.value==loginForm.password.value){
               alert("登录成功");
               return;
           }else{
              alert("登录失败");
              return;
           }
           loginFrom.submit();
      }
  </script>

  <form name="loginForm">
    请输入账号：<input name="account" type="text"><br>
    请输入密码：<input name="password" type="password"><br>
    是否注册会员<br>
      <input id="register" type="checkbox" >确认<br>
  <input type="button" value="登录" onClick="validate()"><br>
  </form>
  </body>
</html>

2、在第一个页面里输入数字N，提交后在第二个页面里显示N个欢迎
one.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
    <body>

        <form action="two.jsp"method="post">
            输入数字N<br>
            <input name="number" type="text"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

two.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
    <body>
     <% String num=request.getParameter("number");
     int value=Integer.parseInt(num);
     for(int i=1;i<=value;i++){
        out.print("welcome ");
        if(i%5==0){
            out.print("<br>");
        }
     }
     %>
    </body>
</html>

3、在页面1中输入账号和密码完成登录，跳转到页面2，在页面2输入用户姓名后跳转到页面3，该页面显示账号和姓名。
page1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<html>
  <body>
    欢迎登录
    <script type="text/javascript">
      function validate() {
        // 检查账号和密码是否为空
        if (loginForm.account.value == "" || loginForm.password.value == "") {
          alert("账号和密码不能为空！");
          return false;
        }

        // 这里只是一个简单的账号密码相等判断，实际应用中应调用后台验证
        if (loginForm.account.value == loginForm.password.value) {
          alert("登录成功");
          loginForm.submit();  // 提交表单
        } else {
          alert("登录失败");
          return false;  // 防止表单提交
        }
      }
    </script>

    <form name="loginForm" action="page2.jsp" method="post">
      请输入账号：<input name="account" type="text"><br>
      请输入密码：<input name="password" type="password"><br>
      <input type="button" value="登录" onClick="validate()"><br>
    </form>
  </body>
</html>

page2.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
    <body>
    <%String account1=request.getParameter("account");%>
    <form action="page3.jsp" method="post">
    <input name="useraccount" type="hidden" value="<%=account1%>">
    输入姓名：<br>
    <input name="NAME" type="text"><br>
    <input type="submit" value="提交">
    </form>
    </body>
</html>

page3.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
    <body>
       <%
        String acc=request.getParameter("useraccount");
        String N=request.getParameter("NAME");
        out.print(acc);
        out.print("<br>");
        out.print(N);
       %>
    </body>
</html>

总结传递过程：
在 page1.jsp，用户输入账号和密码，点击登录按钮后，表单数据通过 POST 提交给 page2.jsp。
在 page2.jsp，获取 account 参数并通过隐藏字段将其传递给 page3.jsp，同时用户输入的 NAME 也通过表单传递。
最后，在 page3.jsp 中，获取 useraccount（即 account）和 NAME 参数并显示在页面上。