JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
Posted luzhouxiaoshuai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-6.ajax校验功能之页面实现
JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理
JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现
JavaWeb网上图书商城完整项目--day02-12.激活功能各层实现