JSP
JSP全名为Java Server Pages，中文名叫java服务器页面
JSP六大组成部分
1、指令 <%@ %> 指定页面的脚本语言、文本类型、编码格式、导包等
2、HTML 标签 展示页面
3、小脚本 <% %> 辅助作用，解决HTML不能实现的逻辑编程
4、表达式 <%= %> 替代out.print输出，将小脚本中的变量进行输出
5、声明 <%! %> 声明全局变量
6、注释 <!-- --> HTML注释：后台可见
<%-- --%> 脚本注释:后台不可见
验证表单格式的JavaScript yanzheng.js
$(function () { // 用户名验证 $("[name=username]").on("input", function () { var reg = /^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/; var username_val = $(this).val(); if(username_val==null||username_val===""){ $(this).next().html("*").css("color", "red") }else if (reg.test(username_val) === false) { $(this).next().html("×用户名不正确").css("color", "red") } else { $(this).next().html("✔").css("color", "green") } }); // 密码验证 $("[name=password]").on("input", function () { var reg =/^([0-9]|[a-zA-Z]){6,16}$/; var password_val = $(this).val(); if(password_val==null||password_val===""){ $(this).next().html("*").css("color", "red") }else if (reg.test(password_val)===false) { $(this).next().html("×密码不正确").css("color", "red") } else { $(this).next().html("✔").css("color", "green") } }); // 邮箱验证 $("[name=email]").on("input", function () { var reg = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/; var email_val = $(this).val(); if(email_val==null||email_val===""){ $(this).next().html("*").css("color", "red") }else if (reg.test(email_val) === false) { $(this).next().html("×邮箱格式不正确").css("color", "red") } else { $(this).next().html("✔").css("color", "green") } }); // 提交 $("#fm").submit(function () { var userName=$("[name=username]").next().html(); var passWord=$("[name=password]").next().html(); var Email=$("[name=email]").next().html(); if(userName==="*"||passWord==="*"||Email==="*"){ $("[name=提交]").next().html("请输入完提交") }else if(userName==="×用户名不正确"||passWord==="×密码不正确"||Email==="×邮箱格式不正确"){ $("[name=提交]").next().html("请正确输入再提交") }else if(userName==="✔"&&passWord==="✔"&&Email==="✔"){ return true; } return false; }); })
登陆页面 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>J站注册页面</title> <script src="js/jquery-3.3.1.min.js"></script> <!--导入样式 --> <link rel="stylesheet" href="css/dl.css"> <!--导入验证--> <script src="js/yanzheng.js"></script> </head> <body> <div> <form id="fm" action="dlh.jsp" method="post"> <div> <img src="img/chang.gif" height=200px width=800px /> <div class="表单"> <p> <label for="username">账号:</label><input type="text" name="username" id="username" placeholder="请输入账号"><span style="color: red">*</span> </p> <p> 密码:<input type="password" name="password" placeholder="请输入密码"><span style="color: red">*</span> </p> <p> 邮箱:<input type="text" name="email" placeholder="请输入邮箱"><span style="color: red">*</span> </p> <p> 性别 <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </p> <p> 爱好 <input type="checkbox" name="hobby" value="篮球">篮球 <input type="checkbox" name="hobby" value="游泳">游泳 <input type="checkbox" name="hobby" value="跑步">跑步 <input type="checkbox" name="hobby" value="高尔夫">高尔夫 </p> <p> <input type="submit" name="提交" value="提交" onclick="subm()"><span style="color: red"></span> </p> <input type="reset" id="reset" value="重置"> </div> </div> </form> </div> </body> </html>
登陆成功后的跳转页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div> <%--获取信息--%> <%request.setCharacterEncoding("utf-8"); %> <%String username=request.getParameter("username"); %> <%String password=request.getParameter("password"); %> <%String email=request.getParameter("email"); %> <%String sex=request.getParameter("sex"); %> <%String[] hobby=request.getParameterValues("hobby"); %> <p> 账号:<%=username%></p> <p> 密码:<%=password%></p> <p> 邮箱:<%=email%></p> <p> 性别:<%=sex%></p> <p>爱好: <%if(hobby!=null){ for(int i=0;i<hobby.length;i++){ %> <%=hobby[i]%> <%}}%> </p> </div> </body> </html>
