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

我们来看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 ...

随机推荐

static关键字修饰属性
static 静态的,可以修饰属性,方法,代码块(或初始化块) , 内部内非static修饰的属性(实例变量):各个对象各自拥有一套各自的副本 static修饰属性(l类变量): 1.由类创建的所有 ...
PMP | 备考笔记
(持续更新......) 五大过程组和十大知识领域是PMP的重要组成部分,也是这门课的重点线索,本文会逐步迭代.渐进明细的来补充完善这个体系. (先放个图吧) 以下每个模块记录自己有点模糊的地方项目 ...
Netty学习笔记（二） - ChannelPipeline和ChannelHandler
ChannelPipeline 和 ChannelHandler 是 Netty 重要的组件之一,通过这篇文章,重点了解这些组件是如何驱动数据流动和处理的. 一.ChannelHandler 在上一篇 ...
【HBase】rowkey、索引表设计
总订单数1亿条 ->订单id,用户id,商品id集合,订单时间,订单完成时间,订单状态: HBase表设计: 主表 -> Rowkey: 用户ID_时间戳列簇:info 索引表 -> ...
【Hadoop】hdfs的秘密，namenode,datanode,yarn,安全模式，fsimage,edits...
1.bin/hdfs namenode -format ** 注意事项 1.在配置好了配置文件之后,首次启动之前,做初始化操作 2.在后续启动的时候,不需要再初始化 3.初始化的一些影响一.初始化操 ...
Java实现 LeetCode 784 字母大小写全排列（DFS）
784. 字母大小写全排列给定一个字符串S,通过将字符串S中的每个字母转变大小写,我们可以获得一个新的字符串.返回所有可能得到的字符串集合. 示例: 输入: S = "a1b2" ...
Java实现蓝桥杯算法训练动态数组使用
算法训练动态数组使用时间限制:1.0s 内存限制:512.0MB 提交此题从键盘读入n个整数,使用动态数组存储所读入的整数,并计算它们的和与平均值分别输出.要求尽可能使用函数实现程序代码.平均值 ...
Java实现 LeetCode 430 扁平化多级双向链表
430. 扁平化多级双向链表您将获得一个双向链表,除了下一个和前一个指针之外,它还有一个子指针,可能指向单独的双向链表.这些子列表可能有一个或多个自己的子项,依此类推,生成多级数据结构,如下面的示例 ...
消费者启动，允许期间报task supervisor timed out 异常，解决
如何解决后端项目启动时抛出 task supervisor timed out 异常现象描述后端项目启动时抛出如下异常,但是该后段项目能正常启动并注册到注册中心,不影响功能使用. 2018-10- ...
@Transactional 事务的底层原理
最近同事发现一个业务状态部分更新的bug,这个bug会导致两张表的数据一致性问题.花了些时间去查问题的原因,现在总结下里面遇到的知识点原理. 问题一:事务没生效我们先看一段实例代码,来说明下问题: ...

JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

JavaWeb网上图书商城完整项目--BaseServlet

JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验的更多相关文章

随机推荐

热门专题