JSP实现表单验证
2017-10-20 19:08
148 查看
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应用的自我理解之三：JSP+Servlet实现表单验证
- jsp实现表单异步验证+传送接收数据
- jsp实现文件上传以及表单验证
- 软件工程课程设计问题总结——医院门诊系统（二）：jsp中验证码的实现&设置验证失败不提交表单
- 在jsp界面实现对表单用户名、密码不能为空的验证代码
- JavaScript实现表单验证后的聚焦
- JSP+Servlet + JDBC 实现简单的登录验证模块
- form的onsubmit事件--表单提交前的验证最佳实现方式
- 怎样用vue.js实现表单验证
- 自己实现的ajax表单验证
- 《ASP.NET基于表单的验证实现网上安全访问,管理》
- JS实现简单的表单验证01
- JS实现表单验证
- jQuery表单验证插件formValidation实现个性化错误提示(超实用)
- 如何实现完美的表单验证
- JS实现的表单验证和强大的身份证
- jquery ajax提交表单从action传值到jsp实现小结
- jquery ajax提交表单从action传值到jsp实现小结
- JSP中图片验证的实现
- JSP+Servlet+JDBC+MySQL实现表单生成