实验要求：
编写一个注册信息填写界面，使用jQuery和JavaScript处理输出的信息，该页面能完成多种信息检查，并能利用jQuery发送Ajax请求。
使用的idea开发，下面是源码
JQueryRegister.jsp
<%--
Created by IntelliJ IDEA.
User: 99631
Date: 2018/11/14 0014
Time: 11:30
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
xx班级同学信息注册系统
<button id="brief" >填写简要信息</button>
<button id="detail">填写详细信息</button>
<br>
<form id="form1" >
姓名：<input type="text" id="username" name="username"><label id="label" for="username">至少四个字符</label>
<br>
密码：<input type="password" id="password1" name="password1"><br>
确认密码：<input type="password" id="password2" name="password2"><label id="psdlabel" for="password2"></label><br>
性别：<select name="sex">
<option name="男">男</option>
<option name="nv">女</option>
</select><br>
<div id="test">
邮箱：<input type='text' id='email' name='email'><label id='emlabel' for='email'></label><br>
宿舍：<select name='house' id="house">
<option value='3号宿舍楼' id="3">3号宿舍楼</option>
<option value='7号宿舍楼' id="7">7号宿舍楼</option>
<option value='8号宿舍楼' id="8">8号宿舍楼</option>
</select>
<select name='room' id="room">
<option value='301'>301</option>
<option value='302'>302</option>
<option value='303'>303</option>
</select>
</div>
<input type="checkbox" name="check" value="agree">同意本系统使用协议<a id="protocol" href="#html1">查看使用协议</a><br>
<a id="html1" ></a><br>
<input type="button" id="submit" name="submit" value="注册"><label id="labe3" style="color: red" for="submit"></label>
<input type="hidden" name="statu" value="user">
</form><hr>
<div id="show"></div>
<%--JavaScript--%>
<script type="text/javascript" src="jquerylib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#test").hide();
<%--填写详细信息按钮单击事件--%>
$("#detail").click(function () {
$("#test").show();
<%--email--%>
$("#email").blur(function () {
if(String($("#email").val()).length==0||String($("#email").val()).indexOf("@")==-1){
$("#emlabel").empty().append("请输入正确邮件地址").css("color","red");
}else {
$("#emlabel").empty();
}
});
});
<%--填写简要信息按钮单击事件--%>
$("#brief").click(function () {
$("#test1").hide();
});
<%--username--%>
$("#username").blur(function () {
$("input[type='hidden']").attr("value","user");
$("#label").empty().load("/Register",$("#form1").serializeArray(),function (text,status) {
$("#label").remove();
$("#username").after(text);
});
});
<%--宿舍号的改变--%>
$("#house").click(function () {
if ($("#3").is(':checked')) {
$("#room").empty().append("<option value='301'>301</option><option value='302'>302</option><option value='303'>303</option>");
}else if ($("#7").is(':checked')) {
$("#room").empty().append("<option value='701'>701</option><option value='702'>702</option><option value='703'>703</option>");
}else if ($("#8").is(':checked')) {
$("#room").empty().append("<option value='801'>801</option><option value='802'>802</option><option value='803'>803</option>");
}
});
});
<%--password2--%>
$("#password2").blur(function () {
if ($("#password1").val()!=$("#password2").val()) {
$("#psdlabel").empty().append("两次输入的密码不一致").css("color","red");
}else {
$("#psdlabel").empty();
}
});
<%--超链接单击响应事件--%>
$("#protocol").click(function () {
var id = $("#protocol").attr("id");
if (id == "protocol") {
$("#html1").append("这是协议内容，此处省略一万字");
$("#protocol").text("隐藏使用协议");
$("form a").first().removeAttr("id").attr("id", "hiden");
}
else{
$("#html1").empty();
$("form a").first().text("查看使用内容").attr("id","protocol");
}
});
<%--单击提交按钮响应事件--%>
$("input[type='button']").click(function () {
if($("input[type='checkbox']").is(':checked')){
var username=$("#username").val().trim();
var name1="zhangsan";
var name2="lisi";
if($("input[name='username']").val().length<4||username==name1||username==name2){
$("#labe3").empty().append("用户名不符合要求");
}
else if($("#password1").val()!=$("#password2").val()){
$("#labe3").empty().append("密码不符合要求");
}
else if (String($("#email").val()).length==0||String($("#email").val()).indexOf("@")==-1) {
$("#labe3").empty().append("邮箱不符合要求");
}
else{
$("#labe3").empty();
$("input[type='hidden']").attr("value","form");
$("#show").load("/Register",$("#form1").serializeArray());
}
}
else{
alert("请同意本系统使用协议");
}
});
</script>
</body>
</html>
Register.java
package servlets;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/Register")
public class Register extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String username=request.getParameter("username");
String sex=request.getParameter("sex");
String email=request.getParameter("email");
String house=request.getParameter("house");
String room=request.getParameter("room");
String statu=request.getParameter("statu");
if (statu.equals("user")) {
//判断username
if (username.length() < 4) {
out.println("<label id=\"label\" style='color:red' for=\"username\">姓名少于四个字符！</label>");
} else {
if (username.equals("zhangsan") || username.equals("lisi")) {
out.println("<label id=\"label\" style='color:red' for=\"username\">该用户名已注册！</label>");
} else {
out.println("<label id=\"label\" for=\"username\">该用户名可以使用</label>");
}
}
}
if(statu.equals("form")) {
out.println(username + "，您好，现在的时间是" + new java.util.Date());
out.println("<br>您的注册信息如下");
out.println("<br>姓名：" + username);
out.println("<br>性别：" + sex);
out.println("<br>邮箱：" + email);
out.println("<br>楼号：" + house);
out.println("<br>宿舍号：" + room);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
