JSP实现表单验证
程序员文章站
2022-06-01 22:50:29
...
JSP实现表单验证
第一个体现jsp价值的作业，然而在经历重重问题考验后，Ending
- 注册表单：register
<%--
Created by IntelliJ IDEA.
User: Luminary
Date: 2017/10/20
Time: 15:23
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Register</title>
<style type="text/css">
ul
{
list-style: none;
margin: 80px auto;
}
li
{
margin: 20px;
}
</style>
<body>
<form action="Post.jsp" onsubmit="return check();" method="post">
<ul>
</head>
<li>
用户名： <input type="text" name="username" id="name" size="25" style="margin-left: 12px;">
</li>
<li>
密 码： <input type="password" name="password" size="25"style="margin-left: 12px;">
</li>
<li>籍 贯：
<select name="home" style="margin-left: 12px;">
<option selected value="杭州">杭州</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
</select>
</li>
<li>
出生年月：<input type="text" name="data" size="25">
</li>
<li>
性 别：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</li>
<li>
爱 好：
<input type="checkbox" name="habit" value="Book">Book
<input type="checkbox" name="habit" value="Running">Running
<input type="checkbox" name="habit" value="Singing">Singing
<input type="checkbox" name="habit" value="Dancing">Dancing
<input type="checkbox" name="habit" value="Game">Game
</li>
<li>
身 高：
<input type="text" name="height" size="25"> cm
</li>
<li>
邮 箱：
<input type="text" name="email" id="mail" size="25">
</li>
<li>
手 机：
<input type="text" name="phone" id="phone" size="25">
</li>
<li>
简 介：
<textarea maxlength="15" rows="10" cols="25" name="introduce"></textarea>
</li>
<li>
<input type="reset" value="清空">
<input type="submit" value="提交">
</li>
</ul>
</form>
<script>
function check()
{
//用户名验证
var n=document.getElementById("name");
n = n.value;
if(n.length<6||n.length>10)
{
alert("用户名长度必须在6到10位之间！");
return false;
}
if(n.charAt(0)<'A'||n.charAt(0)>'z')
{
alert("用户名必须以首字母开头");
return false;
}
//邮箱验证
var m=document.getElementById("mail");
m=m.value;
if(m.indexOf("@") < 0 )
{
alert("邮箱中没有包含@字符！");
return false;
}
//手机验证
var p = document.getElementById("phone");
p=p.value;
if(p.length!=11)
{
alert("手机号必须为11位！");
return false;
}
}
// console.log(document.getElementsByTagName("form"));
// document.getElementsByTagName("form")[0].onsubmit =check();
</script>
</body>
</html>
- 提交页面：Post.jsp
<%--
Created by IntelliJ IDEA.
User: Luminary
Date: 2017/10/20
Time: 16:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=gb2312" language="java" errorPage="error.jsp" %>
<html>
<head>
<title>Title</title>
<style>
ul
{
list-style: none;
margin: 50px;
}
li
{
margin: 10px;
}
</style>
</head>
<body>
<%request.setCharacterEncoding("UTF-8");%>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
String home = request.getParameter("home");
String data = request.getParameter("data");
String sex = request.getParameter("sex");
String[] habit = request.getParameterValues("habit");
String height = request.getParameter("height");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
String introduce = request.getParameter("introduce");
%>
<ul>
<li>
用户名：<%=username%>
</li>
<li>
密码：<%=password%>
</li>
<li>
籍贯：<%=home%>
</li>
<li>
出生年月：<%=data%>
</li>
<li>
性别：<%=sex%>
</li>
<li>
爱好：
<%
if(habit.length==0)
throw new Exception( "您没有选择任何爱好！" );
for(int i=0;i<habit.length;i++)
{out.println(habit[i]);}
%>
</li>
<li>
身高：
<%=height%>
</li>
<li>
邮箱：
<%=email%>
</li>
<li>
手机：
<%=phone%>
</li>
<li>
简介：
<%=introduce%>
</li>
</ul>
</body>
</html>
- 错误页面：error.jsp
<%--
Created by IntelliJ IDEA.
User: Luminary
Date: 2017/10/20
Time: 17:52
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<html>
<head>
<title>Title</title>
</head>
<body>
当前页面是：error.jsp<br>
<%out.print("您没有选择任何爱好，请您返回重新选择爱好，至少选择一个！");%>
</body>
</html>
实现效果
-
1.没有选择爱好，跳转到错误页面
-
2.选择爱好，跳转到提交页面显示提交结果
下面来整理一下遇到的问题和新学的知识点
1.form标签内的onsubmit可以实现跳转前先验证表单的内容是否正确，如果正确会提交post.jsp。js中如果验证不成功就会返回false，不会提交，直到验证成功才会提交。onsubmit="return check();"2. 必须先获取对象才能再获取其值//var m=document.getElementById("mail").value（X） var m=document.getElementById("mail"); m=m.value;3. 在浏览器控制台打印某个标签对象的值，当出现bug是可以调试打印出错误信息。可以在浏览器里面设断点调试js代码。console.log(document.getElementsByTagName("form"));4.为了在jsp获取值，需要在前面表单中所有不是用户输入的标签，比如select和radio和checkbox，凡是需要用户进行选择的选项时，一定要加上value的值，这样post.jsp页面才会获取到。紧接上一个问题，当value的值为中文时，post.jsp页面是无法争取显示出中文字符的，这时可以在post.jsp页面加上一句下面代码，中文就可以正常显示。<%request.setCharacterEncoding("UTF-8");%>5. 索引第一个字符：charAt（0）； 判断是否包含某个字符：indexOf和0比较 6. 本次联系主要训练方法： request.getParameterValues() -复选框返回数组循环可以输出，但是要注意可能会出现异常，例如habit.length=0时post.jsp就会出现异常，所以要注意设置异常页面。 request.getParameter() -返回name与括号内容匹配的标签的值，提取数据。在要抛出异常的页面：errorPage="error.jsp"在要显示异常的页面：isErrorPage="true"7. 在js中绑定事件document.getElementsByTagName("form")[0].onsubmit =check();引用十九大的一句话：欣赏你一往无前的奋斗姿态
上一篇： jsp表单处理
下一篇： 使用MVC的JSP表单标签库处理表单