JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1、现在我们要将table表中的输入的参数全部提交到后台进行校验，我们提交我们是按照表单的形式提交，所以我们首先需要在table表外面添加一个表单
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby">
<form action="/goods/UserServlet" method="post">
<input type="hidden" name="method" value="regist"/>
<table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label class="errorClass" id="loginnameError">用户名不能为空</label></td>
</tr> <tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label class="errorClass" id="loginpassError"></label></td>
</tr> <tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label class="errorClass" id="reloginrepassError"></label></td>
</tr> <tr>
<td class="tdText">Email：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="email" id="email"/></td>
<td class="tdError"><label class="errorClass" id="emailError"></label></td>
</tr> <tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label class="errorClass" id="verifyCodeError"></label></td>
</tr> <tr>
<td class="tdText"></td>
<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>
<td class="tdError"><label ><a href="javascript:changeVerifyCode()">换一张</a></label></td>
</tr> <tr>
<td class="tdText"></td>
<td class="tdInput"><input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr> </table>
</form>
</div>
</div>
</body>
</html>
我们添加了一个表单，将表单中的内容传递给UserServlet进行处理，因为UserServlet继承了BaseServlet，访问的时候需要指定参数是method，调用的UserServlet中的regist方法
<input type="hidden" name="method" value="regist"/>不清楚的看博客
JavaWeb网上图书商城完整项目--BaseServlet
接下来我们在UserServlet中注册regist方法
package com.weiyuan.goods.user.web.servlet; import java.io.IOException; 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 cn.itcast.servlet.BaseServlet; /**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends BaseServlet{
private static final long serialVersionUID = 1L; public String regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("regist is called");
return null;
} }
当我们点击注册页面的立即注册的时候，就会调用UserServlet的regist方法
这里我们点击立即注册的时候，我们还需要对输入框中的内容进行检验，只有全部满足条件，我们才提交到UserServlet的regist方法中进行处理
当提交表单时，会发生 submit 事件。
该事件只适用于表单元素。
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
我们来看下程序的代码：
首先给表单添加一个id
<form action="/goods/UserServlet" method="post" id="registForm">
我们来看regist.js中的代码
//该函数在html文档加载完成之后会调用
$(function() {
/*
* 变量所有的错误信息，调用一个方法来决定是否显示错误信息
* */
$(".errorClass").each(function() {
showError($(this));//$(this)表示当前遍历的对象
}); //切换注册按钮的图片
$("#submitBtn").hover(function () {
//获得光标焦点
$("#submitBtn").attr("src","/goods/images/regist2.jpg");
},function(){
//失去光标的焦点
$("#submitBtn").attr("src","/goods/images/regist1.jpg"); }); //当输入框获得焦点的时候，隐藏label标签的内容
$(".inputClass").focus(function() {
//首先获得label标签的id
var inputId = $(this).attr("id");
var labelId = inputId+"Error";//label的id
//清楚该标签的内容
$("#"+labelId).text("");
//让该标签不显示
showError($("#"+labelId));
});
//当输入框失去焦点的时候，我们需要对输入的数据进行有效的校验，比如输入的电话号码是否合法，邮箱是否合法
$(".inputClass").blur(function() {
//首先判断当前是那个input输入框被调用了
var inputId = $(this).attr("id");
//;
//调用对应的校验方法
var functionName = "validate"+inputId;//获得需要调用的验证函数，如果是id为loginname，就调用validateloginname()函数进行验证
switch(functionName){
case "validateloginname":
validateloginname();
break;
case "validateloginpass":
validateloginpass();
break;
case "validatereloginrepass":
validatereloginrepass();
break;
case "validateemail":
validateemail();
break;
case "validateverifyCode":
validateverifyCode();
break;
default:
break;
}
}); //对表单的提交进行校验
$("#registForm").submit(function() {
if(! validateloginname()){
return false;
}
if(! validateloginpass()){
return false;
}
if(! validatereloginrepass()){
return false;
}
if(! validateemail()){
return false;
}
if(! validateverifyCode()){
return false;
} return true;
}); }); // 对输入的用户名进行合法性校验
function validateloginname(){
//获得输入框中的内容
var content = $("#loginname").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名不能为空！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空，将后面的label显示出来
$("#loginnameError").text("用户名的长度必须在3-20之间！");
//显示标签
showError($("#loginnameError"));
return false ;//不再执行后面的语句
}
//是否已经注册的校验
return true;
} //对输入的密码进行校验
function validateloginpass(){
//获得输入框中的内容
var content = $("#loginpass").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#loginpassError").text("密码不能为空！");
//显示标签
showError($("#loginpassError"));
return false ;//不再执行后面的语句
}
//长度校验
if(content.length <3 || content.length>20){
//内容为空，将后面的label显示出来
$("#loginpassError").text("密码的长度必须在3-20之间！");
//显示标签
showError($("#loginpassError"));
return false ;//不再执行后面的语句
}
return true;
} //对输入的确认密码进行校验
function validatereloginrepass(){
//获得输入框中的内容
var content = $("#reloginrepass").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#reloginrepassError").text("密码不能为空！");
//显示标签
showError($("#reloginrepassError"));
return false ;//不再执行后面的语句
}
//判断两次输入的内容是否一致
if(content != $("#loginpass").val()){
//内容为空，将后面的label显示出来
$("#reloginrepassError").text("两次输入的密码不一致!");
//显示标签
showError($("#reloginrepassError"));
return false ;//不再执行后面的语句
}
return true; } // 对输入的邮箱地址进行校验
function validateemail(){
//获得输入框中的内容
var content = $("#email").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#emailError").text("邮箱不能为空！");
//显示标签
showError($("#emailError"));
return false ;//不再执行后面的语句
}
//判断输入的邮箱格式是否正确
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(content)){
//内容为空，将后面的label显示出来
$("#emailError").text("邮箱格式不正确!");
//显示标签
showError($("#emailError"));
return false ;//不再执行后面的语句
}
return true;
} //对输入的地址进行校验
function validateverifyCode(){
//获得输入框中的内容
var content = $("#verifyCode").val();
// 非空校验
if(!content){
//内容为空，将后面的label显示出来
$("#verifyCodeError").text("验证码不能为空！");
//显示标签
showError($("#verifyCodeError"));
return false ;//不再执行后面的语句
}
//验证码的长度必须是4
if(content.length != 4){
//内容为空，将后面的label显示出来
$("#verifyCodeError").text("验证码不正确!");
//显示标签
showError($("#verifyCodeError"));
return false ;//不再执行后面的语句
}
return true;
} //判断当前元素是否存在内容，存在显示，不存在不显示
function showError( ele ){
var text = ele.text();//获得该对象的文本值
if(!text){
ele.css("display","none");//让该对象消息
}else{
ele.css("display","");//显示对象
} } //实现验证码图片的切换功能
function changeVerifyCode() {
$("#imgVerifyCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());
}
JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验的更多相关文章
- JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...
- JavaWeb网上图书商城完整项目--day02-18.修改密码页面处理
1.用户登陆成功之后会显示 当点击修改密码的时候,会进入下面的页面 对应的是pwd.jsp这个文件 我们把对jsp页面前段的校验都封装在pwd.js中,在jsp中引入该js文件 <%@ page ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
- JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
- JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
- JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候,会去加载main.js文件,我们在加载left.jsp.top.jsp body.jsp,现在我们修改main.jsp的代码,让它去请求的时候去访问的是不在直接去访问left.j ...
随机推荐
- MRCTF 2020 WP
MRCTF 2020 WP 引言 周末趁上课之余,做了一下北邮的CTF,这里记录一下做出来的几题的WP ez_bypass 知识点:MD5强类型比较,is_numeric()函数绕过 题目源码: I ...
- nginx配置https及Android客户端访问自签名证书
前一篇随笔通过keytool生成keystore并为tomcat配置https,这篇随笔记录如何给nginx配置https.如果nginx已配置https,则tomcat就不需要再配置https了.通 ...
- 撸一个简单的vue-router来剖析原理
理解 随着前端业务的发展, 我们一般在写一个较为大型的vue项目时候,会使用到vue-router,来根据指定的url或者hash来进行内容的分发,可以达到不像服务端发送请求,就完成页面内容的切换,能 ...
- Java实现 蓝桥杯VIP 算法训练 Hanoi问题
问题描述 如果将课本上的Hanoi塔问题稍做修改:仍然是给定N只盘子,3根柱子,但是允许每次最多移动相邻的M只盘子(当然移动盘子的数目也可以小于M),最少需要多少次? 例如N=5,M=2时,可以分别将 ...
- Java实现 LeetCode 79 单词搜索
79. 单词搜索 给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中"相邻"单元格是那些水平相邻或垂直相邻的单元格. ...
- java实现 蓝桥杯 算法训练 操作格子
问题描述 有n个格子,从左到右放成一排,编号为1-n. 共有m次操作,有3种操作类型: 1.修改一个格子的权值, 2.求连续一段格子权值和, 3.求连续一段格子的最大值. 对于每个2.3操作输出你所求 ...
- java实现字符串比较
标题:字符串比较 我们需要一个新的字符串比较函数compare(s1, s2). 对这个函数要求是: 1. 它返回一个整数,表示比较的结果. 2. 结果为正值,则前一个串大,为负值,后一个串大,否则, ...
- java实现棋盘上的麦子
** 棋盘上的麦子** 你一定听说过这个故事.国王对发明国际象棋的大臣很佩服,问他要什么报酬,大臣说:请在第1个棋盘格放1粒麦子,在第2个棋盘格放2粒麦子,在第3个棋盘格放4粒麦子,在第4个棋盘格放8 ...
- PAT 有几个PAT
字符串 APPAPT 中包含了两个单词 PAT,其中第一个 PAT 是第 2 位(P),第 4 位(A),第 6 位(T):第二个 PAT 是第 3 位(P),第 4 位(A),第 6 位(T). 现 ...
- PAT 人口普查
某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的,假设已知镇上没有超过 200 岁的老人,而今天是 2014 ...