JavaWeb網上圖書商城完整項目--day02-4.regist頁面提交表單時對所有輸入框進行校驗
阿新 • • 發佈：2017-05-03
word except 繼承 stub jstl use cti bmi imp
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中的代碼
JavaWeb網上圖書商城完整項目--day02-4.regist頁面提交表單時對所有輸入框進行校驗