实验要求:
编写一个注册信息填写界面,使用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); } }