javaweb学习的第一天
2022-09-16 21:14:44 # javaweb #code #javaweb

第一次尝试Javaweb的例子

reg.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title,.Form {
            text-align: center;
        }
        .tb {
            margin: auto;
            width: 30%;
        }
    </style>
    <script>
        window.onload=function(){
            var submit=document.querySelector(".submit");
            submit.addEventListener("click",function(){
                var passwd1 = document.querySelector(".passwd1").value;
                var passwd2 = document.querySelector(".passwd2").value;
                if(passwd1==="" || passwd2===""){
                    alert("please enter password")
                    document.querySelector("form").action="reg.html";
                }
                else if(passwd1!==passwd2 ){
                    alert('two password you have writed are not same!');
                    document.querySelector("form").action="reg.html";
                }
                else {
                    alert("success!")
                }
            })

        }

    </script>
</head>
<body>
    <h1 class="title">用户注册</h1>
    <div class="Form">
        <form action="reg.jsp" method="post">
            <table border="1" class="tb">
                <tr>
                    <td>姓名</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="passwd" class="passwd1"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" name="repasswd" class="passwd2"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="男" checked>男
                        <input type="radio" name="sex" value="女">女
                    </td>
                </tr>
                <tr>
                    <td>职位</td>
                    <td>
                        <select size=1 name="career" id="career">
                            <option value="教育工作者" selected>教育工作者</option>
                            <option value="公司职员">公司职员</option>
                            <option value="自由职业">自由职业</option>
                            <option value="其他">其他</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>电话号码</td>
                    <td><input type="tel" name="tel"></td>
                </tr>
                <tr>
                    <td>电子邮件</td>
                    <td><input type="email" name="mail"></td>
                </tr>
                <tr>
                    <td>兴趣爱好</td>
                    <td>
                        <input type="checkbox" name="fav" value="体育">体育
                        <input type="checkbox" name="fav" value="看书">看书
                        <input type="checkbox" name="fav" value="旅游">旅游
                        <input type="checkbox" name="fav" value="美食">美食
                    </td>
                </tr>
                <tr>
                    <td>自我简介</td>
                    <td>
                        <textarea name="self" id="" cols="30" rows="10" ></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" class="submit" value="登录">
                    </td>
                </tr>
            </table>
        </form>
    </div>

</body>
</html>

reg.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2022/9/16
  Time: 18:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%request.setCharacterEncoding("UTF-8");%>
<html>
<head>
    <title>this is a test</title>
</head>
<body>
    name: <%= request.getParameter("name")%><br>
    password: <%= request.getParameter("passwd")%><br>
    sex: <%= request.getParameter("sex")%><br>
    career: <%= request.getParameter("career")%><br>
    tel: <%= request.getParameter("tel")%><br>
    mail: <%= request.getParameter("mail")%><br>
    <%
        String[] fav = request.getParameterValues("fav");
        if(fav!=null){
            for(String f:fav){
                out.print(f);
            }
            out.print("<br>");
        }
    %>
    self-introduction:<%= request.getParameter("self")%>
</body>
</html>

困扰之处

有一点困住了，两次密码输入不相同时页面不应该发生跳转，JS学了，也忘了，花了很长时间才解决。

由于submit绑定了js事件，原本以为点击后会先执行表单提交。但结果并不是。

1
2
3
4
5
6
7
8
9
10
11
f(passwd1==="" || passwd2===""){
    alert("please enter password")
    document.querySelector("form").action="reg.html";
}
else if(passwd1!==passwd2 ){
    alert('two password you have writed are not same!');
    document.querySelector("form").action="reg.html";
}
else {
    alert("success!")
}
上一页
2022-09-16 21:14:44 # javaweb #code #javaweb
下一页