JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理

1、现在注册成功之后，我们来到登录页面，登录页面在于

在登录页面。我们也需要向注册页面一样对登录的用户名、密码验证码等在jsp页面中进行校验，校验我们单独放置一个login.js文件中进行处理，然后login.jsp加载该js文件

我们来看看login.js的代码和regist.js的代码一样，这里就不用花太多时间进行介绍

$(function() {/** 1. 让登录按钮在得到和失去焦点时切换图片*/$("#submit").hover(function() {$("#submit").attr("src", "/goods/images/login2.jpg");},function() {$("#submit").attr("src", "/goods/images/login1.jpg");});/** 2. 给注册按钮添加submit()事件，完成表单校验*/$("#submit").submit(function(){$("#msg").text("");var bool = true;$(".input").each(function() {var inputName = $(this).attr("name");if(!invokeValidateFunction(inputName)) {bool = false;}});return bool;});/** 3. 输入框得到焦点时隐藏错误信息*/$(".input").focus(function() {var inputName = $(this).attr("name");$("#" + inputName + "Error").css("display", "none");});/** 4. 输入框推动焦点时进行校验*/$(".input").blur(function() {var inputName = $(this).attr("name");invokeValidateFunction(inputName);})
});/** 输入input名称，调用对应的validate方法。* 例如input名称为：loginname，那么调用validateLoginname()方法。*/
function invokeValidateFunction(inputName) {inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);var functionName = "validate" + inputName;return eval(functionName + "()");
}/** 校验登录名*/
function validateLoginname() {var bool = true;$("#loginnameError").css("display", "none");var value = $("#loginname").val();if(!value) {// 非空校验$("#loginnameError").css("display", "");$("#loginnameError").text("用户名不能为空！");bool = false;} else if(value.length < 3 || value.length > 20) {//长度校验$("#loginnameError").css("display", "");$("#loginnameError").text("用户名长度必须在3 ~ 20之间！");bool = false;}return bool;
}/** 校验密码*/
function validateLoginpass() {var bool = true;$("#loginpassError").css("display", "none");var value = $("#loginpass").val();if(!value) {// 非空校验$("#loginpassError").css("display", "");$("#loginpassError").text("密码不能为空！");bool = false;} else if(value.length < 3 || value.length > 20) {//长度校验$("#loginpassError").css("display", "");$("#loginpassError").text("密码长度必须在3 ~ 20之间！");bool = false;}return bool;
}/** 校验验证码*/
function validateVerifyCode() {var bool = true;$("#verifyCodeError").css("display", "none");var value = $("#verifyCode").val();if(!value) {//非空校验$("#verifyCodeError").css("display", "");$("#verifyCodeError").text("验证码不能为空！");bool = false;} else if(value.length != 4) {//长度不为4就是错误的$("#verifyCodeError").css("display", "");$("#verifyCodeError").text("错误的验证码！");bool = false;} else {//验证码是否正确
        $.ajax({cache: false,async: false,type: "POST",dataType: "json",data: {method: "validateVerifyCode", verifyCode: value},url: "/goods/UserServlet",success: function(flag) {if(!flag) {$("#verifyCodeError").css("display", "");$("#verifyCodeError").text("错误的验证码！");bool = false;                    }}});}return bool;
}

我们来看login.jsp的代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>登录</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><meta http-equiv="content-type" content="text/html;charset=utf-8"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.css'/>"><script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script><script src="<c:url value='/js/common.js'/>"></script><!-- 引入login.js文件 --><script type="text/javascript" src="<c:url value='/jsps/js/user/login.js'/>"></script></head><body><div class="main"><div><img src="<c:url value='/images/logo.gif'/>" /></div><div><div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div><div class="login1"><div class="login2"><div class="loginTopDiv"><span class="loginTop">传智会员登录</span><span><a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a></span></div><div><form target="_top" action="<c:url value='/index.jsp'/>" method="post" id="loginForm"><input type="hidden" name="method" value="" /><table><tr><td width="50"></td><td><label class="error" id="msg"></label></td></tr><tr><td width="50">用户名</td><td><input class="input" type="text" name="loginname" id="loginname"/></td></tr><tr><td height="20">&nbsp;</td><td><label id="loginnameError" class="error"></label></td></tr><tr><td>密　码</td><td><input class="input" type="password" name="loginpass" id="loginpass"/></td></tr><tr><td height="20">&nbsp;</td><td><label id="loginpassError" class="error"></label></td></tr><tr><td>验证码</td><td><input class="input yzm" type="text" name="verifyCode" id="verifyCode" value=""/><img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/><a id="verifyCode">换张图</a></td></tr><tr><td height="20px">&nbsp;</td><td><label id="verifyCodeError" class="error"></label></td></tr><tr><td>&nbsp;</td><td align="left"><input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/></td></tr>                                                                                </table></form></div></div></div></div></div></body>
</html>

我们来看程序运行的效果：

转载于:https://www.cnblogs.com/kebibuluan/p/6848208.html

JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理相关推荐

JavaWeb网上图书商城完整项目--day02-2.regist页面输入框得到焦点隐藏label
实现当光标输入在输入输入框的时候,将后面的内容隐藏,例如在用户名称输入信息的时候,后面的用户名不能为空隐藏我们来看看regist.js的代码: //该函数在html文档加载完成之后会调用 $(fun ...
java图书商城项目介绍_JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍...
1.下载jquery的函数包 2.强函数包添加到工程的web-root目录下 3.在jsp文件中加载js文件案例一:在文档加载完成后显示对话框 Stringpath=request.getConte ...
Java项目：JavaWeb实现网上图书商城系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码项目编号:BS-SC-010 开发工具:IDEA / ECL ...
基于javaweb的网上图书商城系统(java+ssm+jsp+mysql+redis+jwt+shiro+rabbitmq+easyui)
基于javaweb的网上图书商城系统(java+ssm+jsp+mysql+redis+jwt+shiro+rabbitmq+easyui) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥ ...
springboot毕设项目：网上图书商城q3ulr（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目:网上图书商城q3ulr(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBu ...
springboot毕设项目网上图书商城q3ulr（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目网上图书商城q3ulr(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBui ...
java web汽车商城_基于jsp的网上汽车商城-JavaEE实现网上汽车商城 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的网上汽车商城, 该项目可用各类java课程设计大作业中, 网上汽车商城的系统架构分为前后台两部分, 最终实现在线上 ...
基于SSM框架开发的网上图书商城系统附带详细运行指导视频
项目描述:这是一个基于SSM框架开发的网上图书商城系统.首先,这个项目页面简洁清爽,代码注释详尽,易于理解和学习.其次,这个项目涉及到Shiro整合JWT.秒杀功能所具备的基本要求(限流.乐观锁.接口 ...
基于PythonDjango的网上图书商城
电子商城作为一个竞争激烈的市场销售方式,大多数电子商城的管理者都主要考虑降低成本,提升商城服务满意度.一年一度的双十一.双十二,给众多的消费者带来了购物盛宴,也给各种商城提供了巨大的销售额.本文通过调 ...

JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理

JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理相关推荐

最新文章

热门文章