学习过程中遇到的一个不错的注册模块(CSDN网上书城),分享一下:
1 注册页面regist.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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <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="divBody"> <form action="<c:url value='/UserServlet'/>" method="post" id="registForm"> <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" value="${form.loginname }"/> </td> <td class="tdError"> <label class="errorClass" id="loginnameError">${errors.loginname }</label> </td> </tr> <tr> <td class="tdText">登录密码:</td> <td> <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/> </td> <td> <label class="errorClass" id="loginpassError">${errors.loginpass }</label> </td> </tr> <tr> <td class="tdText">确认密码:</td> <td> <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/> </td> <td> <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label> </td> </tr> <tr> <td class="tdText">Email:</td> <td> <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/> </td> <td> <label class="errorClass" id="emailError">${errors.email}</label> </td> </tr> <tr> <td class="tdText">验证码:</td> <td> <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/> </td> <td> <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label> </td> </tr> <tr> <td></td> <td> <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div> </td> <td> <label><a href="javascript:_hyz()">换一张</a></label> </td> </tr> <tr> <td></td> <td> <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/> </td> <td> <label></label> </td> </tr> </table> </form> </div> </div> </body> </html>
2 注册页面regist的css:
<%@ 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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <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="divBody"> <form action="<c:url value='/UserServlet'/>" method="post" id="registForm"> <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" value="${form.loginname }"/> </td> <td class="tdError"> <label class="errorClass" id="loginnameError">${errors.loginname }</label> </td> </tr> <tr> <td class="tdText">登录密码:</td> <td> <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/> </td> <td> <label class="errorClass" id="loginpassError">${errors.loginpass }</label> </td> </tr> <tr> <td class="tdText">确认密码:</td> <td> <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/> </td> <td> <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label> </td> </tr> <tr> <td class="tdText">Email:</td> <td> <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/> </td> <td> <label class="errorClass" id="emailError">${errors.email}</label> </td> </tr> <tr> <td class="tdText">验证码:</td> <td> <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/> </td> <td> <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label> </td> </tr> <tr> <td></td> <td> <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div> </td> <td> <label><a href="javascript:_hyz()">换一张</a></label> </td> </tr> <tr> <td></td> <td> <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/> </td> <td> <label></label> </td> </tr> </table> </form> </div> </div> </body> </html>
3 注册页面regist中的JS
$(function() { /* * 1. 得到所有的错误信息,循环遍历之。调用一个方法来确定是否显示错误信息! */ $(".errorClass").each(function() { showError($(this));//遍历每个元素,使用每个元素来调用showError方法 }); /* * 2. 切换注册按钮的图片 */ $("#submitBtn").hover( function() { $("#submitBtn").attr("src", "/goods/images/regist2.jpg"); }, function() { $("#submitBtn").attr("src", "/goods/images/regist1.jpg"); } ); /* * 3. 输入框得到焦点隐藏错误信息 */ $(".inputClass").focus(function() { var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id $("#" + labelId).text("");//把label的内容清空! showError($("#" + labelId));//隐藏没有信息的label }); /* * 4. 输入框失去焦点进行校验 */ $(".inputClass").blur(function() { var id = $(this).attr("id");//获取当前输入框的id var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名 eval(funName);//执行函数调用 }); /* * 5. 表单提交时进行校验 */ $("#registForm").submit(function() { var bool = true;//表示校验通过 if(!validateLoginname()) { bool = false; } if(!validateLoginpass()) { bool = false; } if(!validateReloginpass()) { bool = false; } if(!validateEmail()) { bool = false; } if(!validateVerifyCode()) { bool = false; } return bool; }); }); /* * 登录名校验方法 */ function validateLoginname() { var id = "loginname"; var value = $("#" + id).val();//获取输入框内容 /* * 1. 非空校验 */ if(!value) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("用户名不能为空!"); showError($("#" + id + "Error")); return false; } /* * 2. 长度校验 */ if(value.length < 3 || value.length > 20) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间!"); showError($("#" + id + "Error")); false; } /* * 3. 是否注册校验 */ $.ajax({ url:"/goods/UserServlet",//要请求的servlet data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数 type:"POST", dataType:"json", async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。 cache:false, success:function(result) { if(!result) {//如果校验失败 $("#" + id + "Error").text("用户名已被注册!"); showError($("#" + id + "Error")); return false; } } }); return true; } /* * 登录密码校验方法 */ function validateLoginpass() { var id = "loginpass"; var value = $("#" + id).val();//获取输入框内容 /* * 1. 非空校验 */ if(!value) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("密码不能为空!"); showError($("#" + id + "Error")); return false; } /* * 2. 长度校验 */ if(value.length < 3 || value.length > 20) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("密码长度必须在3 ~ 20之间!"); showError($("#" + id + "Error")); false; } return true; } /* * 确认密码校验方法 */ function validateReloginpass() { var id = "reloginpass"; var value = $("#" + id).val();//获取输入框内容 /* * 1. 非空校验 */ if(!value) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("确认密码不能为空!"); showError($("#" + id + "Error")); return false; } /* * 2. 两次输入是否一致校验 */ if(value != $("#loginpass").val()) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("两次输入不一致!"); showError($("#" + id + "Error")); false; } return true; } /* * Email校验方法 */ function validateEmail() { var id = "email"; var value = $("#" + id).val();//获取输入框内容 /* * 1. 非空校验 */ if(!value) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("Email不能为空!"); showError($("#" + id + "Error")); return false; } /* * 2. Email格式校验 */ if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("错误的Email格式!"); showError($("#" + id + "Error")); false; } /* * 3. 是否注册校验 */ $.ajax({ url:"/goods/UserServlet",//要请求的servlet data:{method:"ajaxValidateEmail", email:value},//给服务器的参数 type:"POST", dataType:"json", async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。 cache:false, success:function(result) { if(!result) {//如果校验失败 $("#" + id + "Error").text("Email已被注册!"); showError($("#" + id + "Error")); return false; } } }); return true; } /* * 验证码校验方法 */ function validateVerifyCode() { var id = "verifyCode"; var value = $("#" + id).val();//获取输入框内容 /* * 1. 非空校验 */ if(!value) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("验证码不能为空!"); showError($("#" + id + "Error")); return false; } /* * 2. 长度校验 */ if(value.length != 4) { /* * 获取对应的label * 添加错误信息 * 显示label */ $("#" + id + "Error").text("错误的验证码!"); showError($("#" + id + "Error")); false; } /* * 3. 是否正确 */ $.ajax({ url:"/goods/UserServlet",//要请求的servlet data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数 type:"POST", dataType:"json", async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。 cache:false, success:function(result) { if(!result) {//如果校验失败 $("#" + id + "Error").text("验证码错误!"); showError($("#" + id + "Error")); return false; } } }); return true; } /* * 判断当前元素是否存在内容,如果存在显示,不页面不显示! */ function showError(ele) { var text = ele.text();//获取元素的内容 if(!text) {//如果没有内容 ele.css("display", "none");//隐藏元素 } else {//如果有内容 ele.css("display", "");//显示元素 } } /* * 换一张验证码 */ function _hyz() { /* * 1. 获取<img>元素 * 2. 重新设置它的src * 3. 使用毫秒来添加参数 */ $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime()); }
效果图如下:
相关推荐
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
JSP_servlet+mysql+jquery+bootstrap实现的后台管理系统 个人的大一下期末大作业
PHP+jquery验证插件示例 PHP+jquery验证插件示例
Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery
express + mongodb + jquery + bootstrap 简单的后台管理系统.zip
Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统,免责声明,朋友分享,切勿商用
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
《HTML5+CSS3+jQuery应用之美》案例完整,跟学书中实例后,相信会使读者的网页设计与制作水平均有实质提升。, 《HTML5+CSS3+jQuery应用之美》适合Web设计人员和前端开发人员阅读,也适合作为相关培训用途的参考用书...
js操作Cookie子键+Jquery调用Ajax方法执行后台操作 返回值给前台。详细注释 Demo
php+jquery+ajax最简单例子
php+mysql+html+jQuery 养老院网站的设计与制作(前台展示+后台管理) php+mysql+html+jQuery 养老院网站的设计与制作(前台展示+后台管理) php+mysql+html+jQuery 养老院网站的设计与制作(前台展示+后台...
jQuery_CHM_1.4.4.chm+jquery1.6jQuery_CHM_1.4.4.chm+jquery1.6jQuery_CHM_1.4.4.chm+jquery1.6jQuery_CHM_1.4.4.chm+jquery1.6jQuery_CHM_1.4.4.chm+jquery1.6jQuery_CHM_1.4.4.chm+jquery1.6jQuery_CHM_1.4.4.chm...
angular+jquery+bootstrap后台模板, 分别用angularjs和jquery完成。
基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+...
java+spring+hibernate+jquery+mysql后台管理系统CMS源码,系统经多次测试,运行无误,大家放心下载
JavaScript+jQuery网页特效设计任务驱动教程-PPT.zip